Docs

[emormile]

Hi – Situation: I’m using the Integrity stack and have a layerslider above the masthead on the homepage with a bottom anchor link. The navbar/logo are set to “fixed-top” and “stacked” and I have added custom CSS to hide the navbar leaving just the logo centered… all works fine, but I want the logo bar to remain fixed as you scroll down the page on desktop & mobile. Currently it scrolls with the rest of the page as if “static”.

I can provide a private test link if necessary.

Thanks

[Thai]

Hi There,

Please provide us with your website URL so we can take a closer look.

Thanks.

[emormile]

This reply has been marked as private.

[Nabeel A]

Hi again,

Please add the following jQuery script in your Customizer via Appearance > Customize > Custom > Edit Global Javascript

function sticky_logobar() {
	var layer_slider_height = jQuery('.x-slider-container').height()
	jQuery(window).scroll(function(){
		if (jQuery(this).scrollTop() > layer_slider_height) {
			jQuery('.x-logobar').addClass('x-navbar-fixed-top');
		} else {
			jQuery('.x-logobar').removeClass('x-navbar-fixed-top')
		}
	});
	jQuery('header.masthead').css('height', jQuery('.x-topbar').height() + jQuery('.x-navbar').height());
}
jQuery(document).ready(function($){
	sticky_logobar();
});
jQuery(window).resize(function($){
	sticky_logobar();
});

And then add the following code in your Customizer via Appearance > Customize > Custom > Edit Global CSS:

@media screen and (max-width: 979px) {
.x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
    position: fixed !important;
}
}

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

[emormile]

Works great!
That JS is above my head.
THANKS!

[Nabeel A]

Glad we could help 🙂

Cheers!

[emormile]

Hi again – the above worked great, but I realized that I overlooked something. I am using a Superfly menu for desktop, but want to use the standard hamburger menu for mobile. I am able to hide the Superfly, but unable to figure out how to get the navbar menu button to show up on mobile. Would you be able to assist?

[Jade]

HI there,

Please add this code in the customizer:

@media (max-width: 979px) {
    .masthead-stacked .x-navbar {
        display: block;
        visibility: visible !important;
    }

}

Hope this helps.

[emormile]

Excellent. Thank you.

[Nico]

Happy to hear that.

Feel free to ask us again.

Thanks. Happy new year 🙂

[Author]

Posts