Logo and Header hidden until scroll (desktop and mobile)

Hello devs! First off, thank you so much for the Sydney theme…it is one of the most beautiful themes I have used.

I am attempting to get the header and logo to be hidden when the site loads, while the menu remains visible, until the user scrolls to a spot, where the header and logo will transition in (fade or “slide” in). Would want the same action for mobile.

I’ve been piecing things together from numerous other posts here, but am frustratingly unable to get the product I need. :frowning:

my page is at www.micahhaid.com

Any help or advice or guidance is GREATLY appreciated! Thank you again for the great theme.

Hello there,

Please add this custom CSS code and let me know how it goes.


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


Regards,
Kharis

Hello Kharis!

Thank you for taking the time to address my issue.

The code you provided works partially. I realize I should have posted my customized javascript and css.

The issues I see currently are:

  1. The header does not appear on internal pages on mobile
  2. The header and logo appear on scroll, but the menu does not
  3. The header/menu is not floating on internal pages on desktop
  4. On mobile, scrolling down, then back up, the logo disappears again, but the header remains visible.

I’ve pasted my code below. Thank you again for your time and any help you can provide!

Best
Micah

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 >= 50 ) {
       $('.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);

CSS-----

.home-logo-gone{
opacity: 0;
max-height: 100px;
}

.site-header.float-header {
background-color: rgba(0,103,133,0.0) !important;
}

.float-header-2.site-header.float-header {
background-color: rgba(0,103,133,1) !important;
}

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

Hello there,

Lets address them one by one.

> 1) The header does not appear on internal pages on mobile

From the code I suggested above, please remove these lines:


.site-header:not(.float-header-2) {
  opacity: 0;
} 

Let me know how it goes.

Regards,
Kharis

So far, so good! :slight_smile:

Header and logo is now visible on internal mobile pages.
However, header area now shows up on initial load of homepage on mobile.

Thank you again, I look forward to the next steps!

Micah

> However, header area now shows up on initial load of homepage on mobile.

Please add this CSS code:


.home .site-header:not(.float-header-2) {
  opacity: 0;
} 

Regards,
Kharis