Docs

[knowmates]

Hi there,

I have a website with a full-width-rev-slider on top. The nav menu is laying on top of the slider and is transparent (I used Stack Renew).

When scrolling down I want the nav menu to be transparent as long as it is laying on top of the slider. When the nav menu reaches the content below the slider I want it to become fixed to the top with a black background and also a change of the logo (from picture to text). Please have a closer look at the attached file.

Thanks in advance!

Best regards

[knowmates]

This reply has been marked as private.

[Joao]

Hi There,

Add the following code to Appereance > Customizer > Custom > CSS

/*
// Transparent Menu Effect
*/
@media only screen and (min-width: 980px) {
body .x-navbar-wrap {
     height:auto;
}

body .x-navbar {
   
  background-color:transparent;
  padding-top: 20px;
  padding-bottom: 20px;
  transition:background-color 0.8s ease-out;
}

body .x-navbar-solid {
	background-color: #333 !important;
  padding-top: 0px;
  padding-bottom: 0px;
  transition: background-color 0.8s ease-in-out;
}

.masthead {
    position:absolute;
    z-index: 1000;
    top:0;
    left:0;
    right:0;
}
}

.x-navbar {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: all .5s ease-in-out;
    transform: all .5s ease-in-out;
    transition: all .5s ease-in-out;
} /* Transparent Menu Effect
*/

And add this to Appereance > Customizer > Custom > Javascript

jQuery(function($) {
    $(window).scroll(function(){ 
        if($(window).scrollTop() >20) {
              $('.x-navbar').addClass("x-navbar-solid");
          		
        }else {
              
          $('.x-navbar').removeClass("x-navbar-solid");
        }
    });
});

Hope it helps

Joao

[knowmates]

This reply has been marked as private.

[Paul R]

Hi,

Please change the Javascript code to this.

jQuery(function($) {
    $(window).scroll(function(){ 
        if($(window).scrollTop() >20) {
              $('.x-navbar').addClass("x-navbar-solid");
              $('.x-brand img').attr('src','NEW IMAGE URL');    
        }else {
          $('.x-brand img').attr('src','http://www.felix-lamm.com/wp-content/uploads/2017/01/Unbenannt-1-1.png');    
          $('.x-navbar').removeClass("x-navbar-solid");
        }
    });
});

Change NEW IMAGE URL with the url of your new logo.

Hope that helps

[knowmates]

That’s it! Thank you!

[Thai]

You’re most welcome 🙂

[Author]

Posts