Docs

[RichWarner89]

Hello! I’ve been browsing the forums and found several threads on this. Im close!
Here is the code I have been using:

@media(min-width: 768px) {
.x-navbar.x-navbar-fixed-top {
background: transparent;
border: none;
box-shadow: none;
}

.x-navbar.x-navbar-fixed-top.x-navbar-solid {
background: #ffffff;
box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135);
}

.home .x-slider-container {
margin-top: -70px;
}

and the custom JS:

JQuery(function($) {
$(window).scroll(function(){
var W = $(window).width();
if($(window).scrollTop() >50 && W > 768) {
$(‘.x-navbar’).addClass(“x-navbar-solid”);
}else {
$(‘.x-navbar’).removeClass(“x-navbar-solid”);
}
});
});

However, this sets the header up just how I want it BEFORE scroll. The header remains transparent with no border or box shadow (like the standard integrity 01 header).

I just need the header to go back to normal when scrolling now! 🙂

[RichWarner89]

This reply has been marked as private.

[Jade]

Hi there,

Please add this code in the custom JS:

jQuery(function($){

	$(window).scroll(function(){

		if( $(this).scrollTop() == 0 ) {
			$('.x-navbar-fixed-top').removeClass('x-navbar-fixed-top');
		}

	})

});

Then add this in the custom CSS:

.masthead-inline {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

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

Hope this helps.

[RichWarner89]

should i add this in addition? or replace?

[RichWarner89]

So i added both in addition to what I had and it seems to work just fine. one thing I do want to change is the transition from transparent to solid, how do you make it a fade to white? versus the abrupt change to white?

[RichWarner89]

*update* I ‘saved’ and then viewed page and now the menu remains transparent. What is going on!?

[Rad]

Hi there,

Hmm, that’s weird and could be related to cache. Though, I’m a bit confused, should it start transparent then fade to white, or start at white then fade to transparent? It starts on white on my view then transition to transparent which I think different from the coding.

Would you mind providing your login credentials? I like to try something else but I need to disable that exist code temporarily.

Thanks!

[RichWarner89]

This reply has been marked as private.

[Rupok]

Hi there,

Thanks for writing in! So you want the transparent Navbar first and then white Navbar on on scroll?

You have the below code already :

.x-navbar.x-navbar-fixed-top {
  background: transparent none repeat scroll 0 0;
  border: medium none;
  box-shadow: none;
}

Let’s update this code to following :

.x-navbar {
  background: transparent none repeat scroll 0 0;
  border: medium none;
  box-shadow: none;
}

.x-navbar.x-navbar-fixed-top {
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  box-shadow: 0 0.15em 0.35em 0 rgba(0, 0, 0, 0.133);
}

Hope this helps.

[RichWarner89]

That did not work 🙁

[Rupok]

Hi there,

I can see this working perfectly as you wanted. Do you want the transparent Navbar back when you scroll back to top? In that case, you can add this under Custom > JavaScript in the Customizer.

jQuery(function($){

	$(window).scroll(function(){

		if( $(this).scrollTop() == 0 ) {
			$('.x-navbar-fixed-top').removeClass('x-navbar-fixed-top');
		}

	})

});

Thanks!

[RichWarner89]

I checked on a different computer and seams to be working. However, I would prefer the transition from transparent to solid be a fade into the white. Not just an immediate transition to white. is this possible?

[Joao]

Hi There,

Add this to your javascript instead :

jQuery(document).ready(function($){
  $('.home .x-navbar-fixed-top').css("background-color", "transparent");
  $(window).scroll(function(){
   if ($(this).scrollTop() > 400) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.99)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 300) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.75)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 200) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.5)").css("transition","0.3s ease-in-out ");
   } else if ($(this).scrollTop() > 100) {
    $('.home .x-navbar-fixed-top').css("background-color", "rgba(255,255,255,0.35)").css("transition","0.3s ease-in-out ");
   } else {
    $('.home .x-navbar-fixed-top').css("background-color", "transparent").css("transition","0.3s ease-in-out ");
   }
    
   if ($(this).scrollTop() > 100) {
     $('.home .x-navbar-fixed-top').addClass('x-navbar-scrolled');
   } else {
     $('.home .x-navbar-fixed-top').removeClass('x-navbar-scrolled');
   }
    
  });
});

And add this to the CSS :

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

Hope it helps

Joao

[Author]

Posts