Docs

[spi]

Hi,

I’m using Integrity stack. I’m trying to make the main nav (just on the home page which id number is 11) to appear transparent so that the revolution slider video would appear behind the menu nicely. The 1 video slider is below the masthead. When the visitor scrolls down, the nav menu must become non-transparent again so that the visitor could see the items on it clearly.

Here is an example: http://www.waituk.net/themes/html/entrada/index.html
I want the nav bar to function just like on this website.

I’ve tried many solutions on your forum and non worked exactly what I wanted.

Thanks!

[spi]

This reply has been marked as private.

[Paul R]

Hi,

To achieve that, you can add this under Cornerstone > Settings > Custom CSS

.x-navbar .desktop .x-nav > li > a {
    color:#fff;
    padding-top: 25px;
}

.x-navbar {
    background-color: rgba(0,0,0,0.5);
}

.x-navbar.x-navbar-fixed-top {
    background-color:#fff;
}

.x-navbar.x-navbar-fixed-top .desktop .x-nav > li > a {
   color:#000;
}

Then add this in Cornerstone > Settings > Custom JS

jQuery(document).ready(function($){
    $(window).scroll(function(){
           if ( $(this).scrollTop() == 0 ) {
                $('.x-navbar').removeClass('x-navbar-fixed-top');
           }
});
});

Hope that helps

[spi]

Thanks Paul.

The nav bar appears when I scroll which is good, but it’s not transparent and I can’t see the video behind it. The video must appear behind the nav bar. Give me another code please. I feel like the JS code is correct but the CSS isn’t?

Best,

[Rad]

Hi there,

The code is correct, please implement it. It just need a few modification.

Change this CSS block

.x-navbar {
    background-color: rgba(0,0,0,0.5);
}

.x-navbar.x-navbar-fixed-top {
    background-color:#fff;
}

to this simplified one

  .x-navbar:not(.x-navbar-fixed-top) {
  background: transparent !important;
  }

And add this CSS,

.home .masthead{
height: 0px;
}

Don’t forget to implement the javascript, it’s the main code that switches navbar class for transparency.

Thanks!

[spi]

Thanks Rad, it works now. My initial nav bar items colour is white, hence I had to add some more CSS code for the menu to appear clearly when the user scrolls down.

Thanks again team X!

[Paul R]

You’re welcome! 🙂

[spi]

Hey

Just one more thing please. If you check my website which is mentioned above, you’ll see that there is still a think line underneath the navbar. How to remove that line?

Thanks again

[Friech]

Hi There,

Add this on your custom CSS.

#header, 
.logo,
.navbar-default .navbar-nav .v-divider {
border-width: 0;
}

Hope it helps, Cheers!

[spi]

Hi,

I’ve tried the mentioned code but nothing changed. I still see the thin line under the header navbar.

🙂

[Christopher]

Hi there,

Please add this as well :

.x-navbar {
    box-shadow: none;
    border: none;
}

Hope it helps.

[spi]

worked perfectly!

thanks!

[Paul R]

You’re welcome! 😉

[Author]

Posts