Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 19, 2016 at 10:35 pm #586344
    Erwin

    Hi,

    I’ve posted a topic about this before, see it here. This topic was closed because it looked solved.

    But after a few changes it hasn’t been solved. I was using div-ID’s to navigate to. Now I had to add a second page (also with a single-page-structure), so only the ID’s ain’t sufficient. Now I have added the url in the link. The navigating does work, but the highlighting of the menu doesn’t. The second-page is “plant it” with it’s own sub-menu. The site is here.

    How can I make the navigating working with highlights? Also it would be nice that it would scroll again to the next section. Using only ID’s to navigating to, it does scroll. Using a url ending on a ID reloads the whole page again.

    Regards,

    Erwin

    February 23, 2016 at 12:34 pm #587654
    Vinay

    Hi erwin_m!

    As i understand you need the main menu to scroll to different section on the same page and highlight at the same time to indicate the user which section they are looking at.

    To scroll to different section on same page you only need to link the #ID of the section we notice that the current URL format is http://yourwebsite.com/page/#food if you like it this way the site reloads and opens the current section but will not scroll.

    To highlight the active menu please add the below css in Quick CSS

    .current-menu-item .avia-menu-text {
	color: red!important;
}

    Cheers!
    Vinay Kashyap

    February 23, 2016 at 6:31 pm #587877
    Erwin

    Hi Vinay,

    That’s the idea indeed. But the menu-item “Plant iT”, is another page. So there are actual two pages. When I’m on the second page and I would like to navigate to the first site, a specific section, then the menu should also work. How can I resolve this?

    Thank you for helping!

    Regards,

    Erwin

    February 24, 2016 at 1:27 pm #588337
    Vinay

    Hey!

    In that case please create 2 menus in Appearance > Menu

    Menu 1 – Single page scroll
    #ID-one
    #ID-two
    #ID-three

    Menu 2 – Point to different page
    yoursite.com/page/#ID-one
    yoursite.com/page/#ID-two
    yoursite.com/page/#ID-three

    Use Full width submenu and select menu type 1 or type 2

    in case you need to use this in main menu you need to make use of a plugin like https://wordpress.org/plugins/zen-menu-logic/

    Regards,
    Vinay Kashyap

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.