Navbar Search disappears when I scroll

[Lacey]

Hi. When I go on any page (except home) the search bar is at the top of the page. When I scroll down and back up it has disappeared. I have no idea why. My site is https://thebiscuitclub.com.au/gallery/

Many thanks

L-J

[ruenel]

Hello @Lacey,

Thanks for writing in! Actually your search bar can be found behind the navbar. To resolve this, please go to X > Theme Options > Header > Navbar and set the “Navbar Top Height” to at least 148 pixels because that is the actual height of your navbar.

We would loved to know if this has work for you. Thank you.

[Lacey]

Hi. Thanks for your reply. I tried that and there are 2 issues.

1. The header is too big then (the black part) and looks ridiculous.
2. The search bar still disappears when I scroll.

[rad]

Hi @Lacey,

For that setup, are you trying to make the menu and logo inline? Because the logo ad menu itself is the one causing that tall header. How about increasing your site’s max-width in Theme Options > Layout and Design, it will give more room to logo and menu to align, thus reducing the height.

And would you mind providing a video recording about search disappearance upon scroll? I can’t reproduce it in all my tests.

Thanks!

[Lacey]

Hi. I like the way the menu and logo currently line up. I want a gap between the header and the main content. I have taken out the search bar in the right column and added it to the menu. HOWEVER when I scroll the screen is still jumping up. I’ve taken a video as requested but not sure how to upload it.

thanks.

[nabeel]

Hey LJ,

As a work around you can fix it by adding the following script in the Theme Options > JS:

function stop_jumps() {
	jQuery('header.masthead.masthead-inline').css('height', jQuery('.x-topbar').height() + jQuery('.x-navbar').height());
}
jQuery(document).ready(function(){
	stop_jumps();
});
jQuery(window).resize(function(){
	stop_jumps();
});

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

[Lacey]

That totally worked. The only page now with an issue is the shop page https://thebiscuitclub.com.au/shop/

I assume it’s because I’m not displaying H1. How do I target only this page to display:none? Or is there a better workaround?

Thanks again for the JS solution.

[rad]

Hi Lacey,

Glad it works, and please add this CSS to specifically target the shop page.

.woocommerce-page.archive .h-landmark {
display: none !important;
}

Cheers!