Home>Support>main navigation has a opacity problem

main navigation has a opacity problem

By Rob Kouw, 8 years ago. Last reply by Andrew Misplon, 8 years ago.

Hi

In custom CSS I’ve used code for the main navigation bar to make it transparent.

For the sticky navbar I’ve stated that it should not be transparent.

The issue is that the settings for the sticky navbar overrule the ones of the transparent main navbar.

Does anybody know how to handle this?

URL: http://www.ooh.nu/home

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 8 years, 11 months ago Rob Kouw 
     
.main-navigation {
background: #000000 !important; 
 opacity: 0.6;
}

.main-navigation.sticky {
background: #000000 !important; 
  opacity: 0.1;
}
  2. 8 years, 11 months ago Philip Barrington

    I think opacity 0.1 should be 1.0

  3. 8 years, 11 months ago Rob Kouw

    Hi Philip,

    Indeed 0.1 should be 1.0. But the issue is that the opacity of the sticky navbar overrules the opacity of the main navbar.

    The main navbar was supposed to be transparent (like 0.6) and when scrolling it should switch to 1.0 in the sticky navbar.
    But now the main navbar, as well as the sticky one, are both the value of the sticky navbar. Despite of all my efforts of changing the opacity and hoping they would work separate from each other.

  4. 8 years, 11 months ago Philip Barrington

    Hi Rob,

    I’m not sure after what I suggested. in the page source I see

    <nav role="navigation" class="site-navigation main-navigation primary use-sticky-menu mobile-navigation">

    and that may be relevant. There may be a setting in the theme that forces that code.

    • 8 years, 11 months ago Rob Kouw

      Hi Philip,

      Thanks for your comment, I’ve put it through to Andrew Misplon.

      Maybe he can reveal something about this.

  5. 8 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    Hey Rob

    It’s best to use RGBA and not opacity. Opacity changes everything in the container, you just want to adjust the background.

    /* Menu Opacity */

.main-navigation {
background: rgba(255,0,0,0.3);
}

    Can you perhaps try experimenting with RGBA and see how you come along?

    Your Custom CSS currently says:

    .main-navigation {
  
background: #000000 !important; 
 opacity: 0.6;
}


.main-navigation.sticky {
background: #000000 !important; 
  opacity: 0.6;
}

    That’s the reason both states are showing 0.6.

  6. 8 years, 11 months ago Rob Kouw

    Hi Andrew,

    Indeed my code currently says 0.6 for the both of them, but that’s because of the sticky menu code which overrules the code for the main navbar.

    I’ve already tried the RGBa way, but didn’t work for me somehow.
    I’ll try again the way you said.

    Thanks

  7. 8 years, 11 months ago Rob Kouw

    By the way Andrew, could the comment of Philip Barrington have something to do with it?

    I’m curious

  8. 8 years, 11 months ago Andrew Misplon
    Hi, I Work Here

    So the goal is to have opacity at the top and then remove that opacity as the bar goes sticky? If so, your CSS should be:

    /* Menu Opacity */

.main-navigation.site-navigation {
	background: rgba(0,0,0,0.3);
}

.main-navigation.sticky {
	background: rgba(0,0,0,1);
}

    Using !important previously might have been the challenge. Above I’ve increased specificity instead of using !important. Should do the trick.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More