Onepage anchor navigation with active links

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

Comments

  • 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
  • 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".


    Best regards,
    Hannes
  • 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
  • Hi Pablo,

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

    Best regards
    Hannes
  • 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
  • Can you disable all of the plugins, clear the cache of your browser and check, if the issue still exists?
    Thanks
  • 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
  • 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
  • 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
Sign In or Register to comment.