Docs

[Rick D]

Hi,
My navigation has been working fine, but it suddenly started covering the top of each section as I link to it. Prior to that the menu disappeared a couple times and I had to go back in and re-save it to make it show up. All of this is happening without me touching any navigation elements. I looked around on the forum and saw one similar situation where you mentioned that the person was using the wrong anchors. I’m using x-content-band-1 etc. (except for x-content-band-4 which I needed but don’t want to link to).

Site: http://qalytics.net/index.php

Thanks!

[Rick D]

One more bit of information: this problem started after my navigation was somehow reset from fixed top to static top. I didn’t make that change, but suddenly my menu was static. When I went into Customizer it had been reset (how?) to static. After I changed it back to fixed top I immediately started seeing the “cover the content” behavior out of the fixed top menu.

[Alexander]

Hi Rick,

Are you using a cacheing plugin perhaps? If you’re actively developing a site while running a cacheing plugin, you could run into issues with settings apparently not being saved.

“Static Top” will keep the navigation from floating down the page.

[Rick D]

My hunch is it’s got something to do with the “noscroll” setting I threw on my embedded Google map. I’ll let you know when I have it sorted out. Or if I don’t….

[Support]

Please let us know if when you sort it out and if possible add the solution here. Thanks!

[Rick D]

I’m really stymied. I’ve tested it with the Google map and javascript disabled, and the offset still isn’t working. I’ve tested it with my slider disabled, and the offset still isn’t working. I’m not using any cacheing plugins. I cannot figure out what’s causing this offset problem. I’m using the #x-content-band-# links.

I read this post, but it’s not really the same situation: http://theme.co/x/member/forums/topic/offsetting-anchor-so-top-of-content-is-not-cut-off-by-nav-bar/.

If you could take a look at this I would be hugely appreciative. We’re trying to launch the website, but this is a big concern.

http://qalytics.net/index.php

Best,

Rick

[Alexander]

Hi Rick,

Have you enabled “One Page Navigation”? The setting for this can be found when editing the page.

If it’s not enabled, clicking an anchor will act with the browser’s default behavior – this means it will but that anchor at the very top of the browser window. At this point your navigation would be covering it.

Having “One Page Navigation” enabled will introduce some javascript that can offset this based on the navbar height. It also adds a scrolling animation.

[Rick D]

Arrgh! Yes, that was the problem. Somehow I disabled the One Page Navigation. It’s always the most obvious things we forget to look for, eh?

Thanks!

[Support]

Glad it’s all sorted now. If you have any questions, let us know. Cheers!

[Rick D]

As a follow-up to this issue, this works perfect at “desktop” sizes, but on mobile the menu is not fixed and therefore the navigation leaves a menu jumps to just above the content – a menu-sized distance. What’s the best way to handle this on mobile?

[Christian]

Hey Rick,

In the Customizer > Custom > CSS, please add the code below.

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

Hope that helps. 🙂

[Rick D]

Thanks, but I think I should have been more clear. I don’t want navigation on mobile to be fixed, because the open menu blocks all the content. I want to get rid of the gap between where the menu drops me and the top of the selected content.

[Support]

Hi Rick!

Thank you for the info.

We would like to check the website again but it’s not loading properly on our end. Please post a screenshot of the gap between where the menu drops. We’ll provide you with a response once we have taken a look at the website again.

Cheers!

[Rick D]

Not sure why the page wouldn’t load, but just in case here’s the address again: http://qalytics.net/index.php.

Here are a couple screen shots based on clicking the Careers link:

iPad: http://qalytics.net/IMG_0922.PNG

iPhone: http://qalytics.net/menu-gap.PNG

[Christian]

Hey Rick,

Thanks for clarifying. The menu still includes the offsetting the navbar that is why it doesn’t appear to be on top when you are in mobile. There is currently no way to adjust that but we might include an option for that in the future. Please stay tuned.

Thanks.

[Author]

Posts