I want mobile navbar to fade at top, show at scroll

Hi!

Thank you for this great theme. I have managed to find solutions from this forum to make my mobile navbar to only show when scrolling but i faced a little bug here. If you scroll it slowly back up, the menu button and the black bar wont fade away. If you scroll it fast back up, it fades. The navbar logo works like a charm, and i want the rest of the navbar to work just like that.

Here’s my website: mietecreations.com

Here’s my custom javascript:

;(function($) {

   'use strict'

   $(window).on('load scroll', function() {
 var y = $(this).scrollTop();
 
 
 if ($('body').hasClass('home')) {
   
   	   $('.site-logo').addClass('home-logo-gone'); 
	   if ( y >= 100 ) {
   $('.site-logo').removeClass('home-logo-gone');
   $('.site-header.float-header').addClass('float-header-2');
 	} 
   	   else {
		$('.site-header.float-header').removeClass('float-header-2');
  		   }
 												}
 else{
	$('.site-logo').style.opacity=1.0;

 }
															   });

})(jQuery);

And here’s my custom CSS:

@media only screen and (max-width:767px){
        
  .header-wrap .container{
    text-align: left;
  }

  .header-wrap .btn-menu{
    float: right;
    margin-right: 15px;
		margin-top: 0px;
  }  

  .header-wrap .col-md-4 {
    max-width: 90%;
    position: relative;
    z-index: 2;
  }

  .header-wrap .col-md-8 {
    margin-top: -50px;       
  }        

  #mainnav-mobi {
    top: 70px;
  }
	
	body header#masthead {
    position: absolute !important;
    background: black !important;
}

div.header-image > img.header-inner {
    min-height: 200px;
}
}
.home-logo-gone{
opacity: 0;
max-height: 100px;
}

.site-header.float-header {
background-color: black !important;
}

.float-header-2.site-header.float-header {
background-color: black !important;
}

@media only screen and (max-width:1024px) {
  
 
  
  .site-header:not(.float-header-2) {
    opacity: 0;
  } 
  
  .site-header.fixed {
    position: fixed !important; 
  } 
  
}

@media only screen and (max-width:1024px) {
  
  #masthead.site-header{
    position: fixed !important;
  }
  
 
}

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 1024px) {
      .site-header:not(.float-header) {
        opacity: 0;
      }
    }

Regards,
Kharis

Solved! Thank you for 1000 times Kharis!

One more question though, when scrolling back up the hamburger menu bounces a bit down and right before it fades. Is there a way to avoid this?

You’re welcome!

… when scrolling back up the hamburger menu bounces a bit down and right before it fades. Is there a way to avoid this?

Try adding this CSS code:

    @media only screen and (max-width: 1024px) {
      .site-header {
        padding: 5px;
      }
    }

Regards,
Kharis

Works like a charm, thank you Kharis! :slight_smile:

It doesn’t jump to side anymore but still bounces bit downwards. :thinking:

Which web browser did you use? Probably it’s a matter of web browser’s behaviour. Let me know, so I can check. Ensure you’re running the latest version.

Regards,
Kharis

I use Google Chrome on my phone, but it does the same when you scroll up with my pc and mozilla at WP Customizer Mobile preview.