Onepage anchor navigation with active links

hannes741 · March 2020

Hello,

is it possible to build a anchor navigation with active links?

So that when I scroll down the site, the menu items get an active style when I scroll to them?

Best regards,

Hannes

Pablo · March 2020

Hello Hannes,

This is what you need to do:

1. Go to menus and create a new menu - http://prnt.sc/f2v9he
2. Name the menu and add a custom link with the ID anchor you will use later(do not use spaces). Add to menu -http://prnt.sc/f2v9th
3. When the menu item is added to the menu, save and go to Manage Locations -http://prnt.sc/f2vafb
4. You go to your main page, you see the new link but when you click nothing happens? No worries, it is because the link has to know where to scroll, to do this edit the page. -http://prnt.sc/f2vc36
5. Edit the section to which you want the button to scroll -http://prnt.sc/f2vcho
6. In the field Custom ID type in the id from the button, in my case, it was id=work, no hashtag there -http://prnt.sc/f2vgaz
7. Remember to have the one-page option selected under the muffinbuiler -http://prnt.sc/f2vcm7

If you do not want to use a normal menu to link the user to sections, you need to add a 'scroll' class to the custom link elemment.

Thanks

hannes741 · March 2020

Hi Pablo,

it works. But there are some little problems.

One menu point is linking to a wrong item although the #id is correct like the others where it is working.

Also the menu items only get the active style, when I navigate with ne up/down navigation. When I use the navigation in the header it is not working...

The wrong linking item is "skills", it should link to the back slider with headline "SKILLS".

Link: http://dev.platinumdesign.gusedesign.com/

Best regards,

Hannes

Pablo · March 2020

You are using some kind of "NSS Slider" plugin which loads after the dom is loaded.

That's why scroll is distorted, the height value of these elements are applied later than the anchor links get loaded.

We are not able to help you because we do not support this kind of slider.

What we can suggest, is to optimize your images to be as smallest(weight of file) as they can be.

Thanks

hannes741 · March 2020

Hi Pablo,

thank you for the answer. I found a solution with the NSS Slider Support.

Best regards

Hannes

hannes741 · April 2020

Hello,
I have here one more question. The navigation is working now, but the active status on the menu items is only showing active, when the section is on the top. When I scroll down, the active status is going off. Is there a possibility to have this active status for the whole section?

Best regards
Hannes

Pablo · April 2020

Can you disable all of the plugins, clear the cache of your browser and check, if the issue still exists?

Thanks

hannes741 · April 2020

Hi, okay I found out that smart slider 3 plugin is also responsible for this... Thank you for this trick!

Have a nice day and best regards

Hannes

hannes741 · April 2020

When I disable all my plugins, the navigation is working fine. Just when I activate smartslider3 in combination with the plugin „Popup Maker" it is not working…

Can you help me find out why menu is not working right with this 2 plugins in combination?

Best regards

Hannes

Pablo · April 2020

Sorry, but we did not test this script/plugin with the theme. Our policy
states that we do not support third party plugins or custom code so
unfortunately, we cannot be of any help to you.
Also, we cannot recommend any plugins other than the ones we support.
You can find the list on this page, in the sidebar:
https://themeforest.net/item/betheme-responsive-multipurpose-wordpress-theme/7758048

thanks

Onepage anchor navigation with active links

Comments