Fixed navbar/ static navbar covers content

Support
#1

Hi people, I have tried the fixed nav for mobile but then it covers the content partially. I can add margin to - for instance - body to push everything down, but when the menu starts to stack on iPad, I have to write media queries for pushing more down which is not ideal concerning different browers. I know this topic has been discussed before and I searched everywhere to find a solution. Is there a workaround with this? I think many of us would like to use this feature correctly. Love to hear from you, thanks!

#2

Hi Lisa,

Thanks for reaching out. I’m not sure I understand exactly what you’re asking. With a fixed navbar the content shouldn’t get covered up. Could you provide a link to your site where we can see the problem you’re describing? Thanks!

#3

Hi,
I can’t show you online yet because I work local. In Theme Options > Header I set Navbar Position to ‘fixed top’ and added some CSS to actually make it fixed and not disappear while scrolling.

.x-navbar {
position: fixed;
top: 0;
width: 100%;
}

On mobile and on desktop it works, but on iPad landscape the menu becomes wider and covers the content. Is there a way that the content somehow be pushed without writing media queries?

#4

Hi There,

Please try adding this custom CSS under Theme Options > CSS:

body.x-navbar-fixed-top-active .x-navbar-wrap {
     height: auto;
}

Hope it helps :slight_smile:

#5

Hi, it works wonderfully, thank you, but I expected the navbar to be sticky. I found the code
@media (max-width: 979px) {
.x-navbar-fixed-top {
position: fixed !important;
}
}
and now everything works well. Thanks again.

#6

Glad to hear it’s sorted, Lisa.

Cheers!

#7

Hi people,
It is kind of sorted: the pages load perfectly. But, after scrolling the page, the content doesn’t scroll back completely. I can scroll up again but until the point the title is partially covered again by the nav.. Is it possible the content scrolls back to the original position, right after loading?
Best regards,
Lisa

#8

Hello Lisa,

Please add this code in the Global JS:

jQuery(function($){

	$(window).scroll(function(){

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

	});

});

Hope this helps.

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.