One Page Navigation - all the menu items are highlighted on load

[Klempel]

Hi,

I am building my page using the Integrity stack. It is a one pager and I have added anchor points to the sections of the page. However, when I load the page, all the menu items are highlighted. When I scroll down, it works propperly again. Once I scroll to the very top again, none of the menu items are selected. I have set the class current-menu-item to the first menu Item alread. What could be missing here?

Thanks in advance,

Ruth

[thai]

Hello There,

Thanks for writing in! It seems that you are trying to set up a one page navigation menu. I would recommend that you create two sets of menu. One menu will be used for the primary menu and the other one will be exclusively for the one page navigation menu. In the primary menu, the “Documents” menu item will have to use https://yourwebsite.com/#documents as the href or url. For one page navigation menu, it will only use #documents so that only the home is active and as soon as you click the Documents menu item, it will make it as the only active menu item.

To know more about one page navigation set up, please check this out: https://theme.co/apex/forum/t/features-how-to-setup-one-page-navigation/96/1

Hope this helps.

[Klempel]

Hello,

thank you very much for your reply. It helped a lot, now it seems to be working fine with the two sets of menus. I was using the complete url in the menu item href (https://yourwebsite.com/#documents) because I was using the same menu set for the blog as well.

The only thing that is bothering me still is that when I scroll to the top of the page, suddently HOME is not highlighted anymore, and also none of the other menu items. When I am almost at the top, HOME is still highlighted, then when I scroll just the last tiny bit up, it is not active anymore. Do you have any ideas on that?

Many thanks,

Ruth

[ruenel]

Hello Ruth,

Thanks for updating in! The remaining issue is because of your navbar height. To resolve this, please go to X > Theme Options > Header > Navbar and set the Navbar Top Height to at least 160 because this is the actual height if your navbar and not 90 pixels.

Please let us know if this works out for you.

[Klempel]

Hi, thanks for your reply!

Setting the Navbar Top Height to 161 did not solve my problem. Do you have maybe another idea? Or is it supposed to work like that? Can you replicate my issue maybe?

Ruth

[paul.r]

Hi Ruth,

You can try the following.

1. Add a unique class to your home menu item.

2. Add the code below in Theme Options > JS

jQuery(function($){
  $(window).scroll(function(){
    if($(this).scrollTop()==0){
        $('.home').addClass('current-item');
    }
  });
});

3. Add this in Theme Options > CSS

.desktop .x-nav > .current-item > a {
    box-shadow: inset 0 4px 0 0 #ff2a13;
}

Hope that helps.

[Klempel]

Hi, sorry that it took some time to reply. But your solution worked, thank you very much!

[jade]

You’re most welcome, David!