Jump to content
Sign in to follow this  

Brandnav background opacity

Recommended Posts


I've searched the forum and have firebugged this thing for hours, but can't find a solution so I thought I'd reach out for some help.


I want to use the Brandnav with some background opacity to allow a slideshow to show through.


Please see the image below for what I'm hoping to achieve.




I'm using Layer Slider for the slideshow and have fiddled around with the positioning of it to get it to "sit" underneath the Brandnav.


But I cannot seem to get the Brandnav to behave as I want (opacity: .8).


Any ideas?

Share this post

Link to post
Share on other sites



Well, you'll probably need to be more specific and narrow down the element to the menu part of brandnav.


Next, you should always use the 0 before the .8.  Your browser will not understand .8 but will understand 0.8.


Lastly, with your site in maintenance mode, it's rather hard to tell how to specifically assign this as we can't inspect it.

Former PageLines Moderator, Food Expert and Raconteur

Share this post

Link to post
Share on other sites

Hi Rob


Thanks for your suggestions.


I finally managed to isolate the correct element and then modified the z-index, which allowed me to achieve the effect I was going for.





Share this post

Link to post
Share on other sites
James B

Hi Dawson, thanks for updating. We'll mark this thread resolved :-)

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Similar Content

    • nandorj78
      By nandorj78+
      I'd like to request a section (or that this could be enabled on the background settings of the existing sections) in which we could set a image to stay fixed, just as we can see in the link below:
      http://www.bootply.com/render/100702 (you can see 2 different background images and everything scrolls on top of it.)
      Is it possible to be done without having to code it via CSS every time?
    • Rob Thomas
      By Rob Thomas+
      One of the things I used to do on my old DMS sites was set the opacity of the menu. So, for example, I would run a script to make the opacity of the menu at .80%. I think it was something like: 
      .pl-fixed-top {
      I want to do this with the MegaNav section: Unique Section ID: meganav_u1e818w
      How do I set the opacity for this section in PL 5? 
      And will we have this functionality with the background video in SplashUp (this was a nice thing to have in the old Video PlugIn).
      I apologize because I should be able to answer my own question. I used to target specific sections in PL, but that was a hot minute ago and my job eats my brain. I can't freaking remember how I did it. 
    • jacobtippett
      By jacobtippett+
      I am trying to get the background image of the Revslider to be clickable and redirect to a link.
      Does anyone know how this is possible?
    • martinjrob
      By martinjrob+
      I am having problems in figuring out how to make the sections transparent so it shows 1 background color, Image.
      I have made all sections with no background colour as it suggests in pagelines docs
      this is the domain name http://www.socialwebservice.co.uk/ and this is how i would like it to look http://ecologysurveysinnorfolk.co.uk/
      Any help will be much appreciated. 
    • abuzzelli
      By abuzzelli+
      Trying to adjust the position of the background image on http://churchofwolves.com/. I need the wolf background to move over to the left on mobile versions so it can be seen. Here's the code I'm using and it's not working. I've tried a bunch of different things. Getting frustrated. Any advice?
      @media (max-width: 768px) { .home .site-wrap{ background: url(http://churchofwolves.com/wp-content/uploads/2015/06/Church-of-Wolves-bkgd1.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: 100% 0%; } }