Offset Nav anchor

Support
#1

I am hoping to see if I can get some help with an offset globally for all my nav bar links.
Am using a static menu and one page navigation. My offset seems to need to shrink the missing space from my navbar height is 50px.
I have tried everything on this support site. Please help

#2

Hello @headmetal,

Thanks for writing in!

Please remove this custom css:

.home .x-navbar.x-navbar-fixed-top {
    position: static;
}

If you do not want to have a fixed navbar, please go to X > Theme Options > Header > Navbar Position and select “Static Top” instead.

Hope this helps. Kindly let us know.

#3

I’ve removed the custom css. The Navbar now is acting as a Fixed Navbar (yes I’ve set the setting to Static Top)
Is this something that happens as I have a single page layout??

#4

Hi @headmetal,

I’m still seeing the class x-navbar-fixed-top-active on your site, that means your Navbar Position is still set to Fixed Top

Sorry but, we are actually confused with the issue or what is you’re trying to do, your “one-page navigation” works perfectly on our end, it scrolls on the right section. Please clarify.

Instead, a couple of different issues that I am seeing on your site (it could be related to your main issue), first, is your X theme is one update behind, please update X to 6.5.6 to avoid incompatibility.

Second, is you miss a closing bracket on this @media CSS query, this could affect your other custom CSS

@media (max-width:767px){
	h1,.h1{
		font-size:30px !important;
	}
	h2,.h2{
			font-size:30px !important;
	}

Please add the missing closing bracket }

Hope it helps,
Cheers!

#5

I’ve corrected the missing bracket.

What I’m trying to do is keep my one page navigation (which is working fine) but make the navbar static. As you can see by this image the setting is correctly setup, however the site is acting as if the navbar is fixed. I’m not sure why this is showing to you as fixed when my setting is static.

#6

Hello @headmetal,

It seems that your settings has not been saved. Would you mind providing us access to your site so that we can check your settings? Please create a secure note with the following info:
– Link to your site
– WordPress Admin username / password
​
To know how to create a secure note, please check this out: https://theme.co/apex/forum/t/how-to-get-support/288

Thank you in advance.

#7

I’ve added the login credentials in the previous message

#8

Hello @headmetal,

Thanks for providing the information. I have checked the navbar position settings and it is correct. I just want to let you know that the default behaviour of the navbar position once you enable the one page navigation in the page setting will becomes fixed top instead of just static top. This has been designed this way because since you are using one page navigation, there is a possiblity that you want to scroll around within the sections of the page. If you want to always have a static top menu, then you may not be able to use one page navigation on the page.

Hope this explains it briefly.

#9

Is there a way to force this in css or create anchors on the page/menu to go to specific sections?
my client really wants the navbar to go away after moving down the page.

#10

Hello There,

You can try adding this custom CSS:

.x-navbar.x-navbar-fixed-top{
    position: relative;
}

This will alter default functionality thus any issue that will appear because of this customization will be outside the scope of our support. Thank you for understanding.

#11

almost perfect. The CSS worked great. I am seeing the navbar change width slightly before the page scrolls down as per the following screenshots

Starting:

moving down a bit:

I did upload the following CSS to try to force max witdth:

.x-navbar .x-container.max.width {
  max-width: 100%;
}
#12

Hi @headmetal,

It should be width and not max width that needs adjustment:

.x-navbar.x-navbar-fixed-top.x-container.max.width {
    width: 100%; /*this is 88% by default*/
}

Hope this helps.

#13

thank you very much. This is working much better.
There is still a space when I use the menu items (the width of where the nav bar was still shows). Is there a way to set an offset now to pull the page down to where the actual anchor is on the section now that we’ve hidden the navigation bar??

here is an example of the 50px spacing when I click the connect option

#14

Hi @headmetal,

That is the side effect of making the menu bar disappear when you scroll. By default, scroll take into account the height of the navigation bar. If the menu is fixed like it is originally intended, it will be place on that space. Unfortunately, as stated before this is outside the scope of our support because it is a result of a cusotmization. Thank you for understanding.

#15

Hey @headmetal,

Just wanted to add here that you can opt not to use the One Page Navigation feature under the Page Settings so your header won’t get fixed or sticky upon scrolling down.

You still can change the menu by using a plugin like Menu Swapper. For usage instructions, please see the documentation at https://wordpress.org/plugins/menu-swapper/

Hope that helps.

#17

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