Navbar not transparent

Hello. Using Integrity stack. I set the header to transparent, but it’s still showing white.

I want my menu to be fixed at the top and be a transparent overlay on my background image. How do I do that? Thanks.

Hi,

You can try adding the code below in Theme Options > CSS

@media(min-width: 980px) {
    .home .masthead  {
        position:absolute;
        width:100%;
        background-color:transparent !important;

    }
    body.x-navbar-fixed-top-active .x-navbar-wrap {
        height: auto;
    }

    .home .x-logobar,.home  .x-navbar, .home .x-topbar  {
        background-color: transparent !important;
        box-shadow: none;
        border: 0;

    }
}

.x-navbar .desktop .x-nav>li>a {
    border-right: 0px ;

}

If that doesn’t help, please provide us your site url so we can take a closer look.

Thanks

Thank you. It didn’t work. The navbar still looks like this:

Hi,

I checked your site and didn’t see the code getting added.

Did you add it in Theme Options > CSS ?

You might have a syntax error i your css code. Try adding it at the very first lineof your Custom CSS

If that doesn’t work, please provide us your wordpress admin login in Secure Note.

Thanks

Hi. It didn’t work. Login provided.
Login updated.

Hi,

The login provided doesn’t seem to work.

Please check again and let us know.

Thanks

Login updated in secure note. Thanks.

Hi there,

Are you trying to make the code work for all the page on the site?

If so, please update the code to:

/*transparent navbar*/
@media(min-width: 980px) {
    .masthead  {
        position:absolute;
        width:100%;
        background-color:transparent !important;

    }
    body.x-navbar-fixed-top-active .x-navbar-wrap {
        height: auto;
    }

    .x-logobar, .x-navbar, .x-topbar  {
        background-color: transparent !important;
        box-shadow: none;
        border: 0;

    }
  
    .x-navbar .x-nav a {
	    background-color: transparent;
    }
}

Here are some related links for further reading:

Hope this helps.

Thank you. That worked. (The navbar bg is finally transparent.) To answer your previous question, I need the menu text to be different colors based on what page it’s on. For example, I need it to be white/light colored when there’s a background and dark when there is no background. How do I do that?

Hi,

To do that, you can add the code below in Cornerstone > CSS to every page you want to change the color of your menu text.

.x-navbar .desktop .x-nav > li > a > span {
    color: black;
}

By adding the code in Cornerstone > CSS, it will only take effect on that specific page and it will also override your global css.

Hope this helps.

1 Like

Brilliant! Thanks!

You’re welcome! :slight_smile:

Hello again. I just realized that I’ve lost my hover effect on the page where I use the different color navbar. The horizontal bar still shows on hover, but the link text does not change color anymore. How do I get that hover effect back?

Hi There,

Please add this to Page > CSS as well.

/*nav menu light hover color*/
.x-navbar .desktop .x-nav > li > a:hover > span {
    color: #cc0000;
}

Replace the #cc0000 with the desired hover color.

Hope it helps,
Cheers!

Perfect! Thank you.

You’re more than welcome, glad we could help.

Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.