Avada Forums Community Forum Menu highlight when there are anchors in the page

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • harf4ng
    Participant
    Post count: 9

    Hi,

    I have several menus which directs to the same page but at different anchors.
    My issue is that when I’m on this page, all the menus are highlighted because they all direct to the same page (just at different anchors).

    There is no way to not have those menus highlighted when I’m not at this anchor?

    Thanks

    marklchaves
    Participant
    Post count: 873

    Hi @mrougeot (harf4ng),

    There’s always a way. It’s just a question of how bad you want it.

    The only way I know how to accomplish this is with JavaScript and CSS. Here are two examples of same page menu linking.

    1) Code and Live Demo of Vertical Nav Bar that Highlights Current Menu Items

    https://codepen.io/marklchaves/pen/gVLGqj

    2) How-to Article, Code, and Live Demo of Horizontal Top Nav Bar that Highlights Current Menu Items

    The live demo here will throw errors because the code is out-of-date. But, the highlighting still works perfectly.

    Article
    https://ayanize.com/snippets/how-to-highlight-current-menu-items-on-a-one-page-site-in-divi/

    Live Demo
    https://ayanize.com/dev/

    Enjoy!

    harf4ng
    Participant
    Post count: 9

    Thanks for the info I’ll have a look.
    Possible to make a code not ouf of date I guess, to not have errors? šŸ™‚

    btw I’m using Avada theme. Not divi theme. Should work as well on Avada?

    harf4ng
    Participant
    Post count: 9

    For Avada they explain how to make a one page website with menus here:
    https://theme-fusion.com/documentation/avada/pages/setting-up-one-page-parallax/

    But they say nothing about the highlight issue.

    marklchaves
    Participant
    Post count: 873

    Hi harf4ng,

    Thanks for the follow-up.

    > Possible to make a code not ouf of date I guess, to not have errors? šŸ™‚

    Of course. If you look at the errors/warnings on Ayanize’s live demo, they are mainly deprecated PHP errors. Their DIVI and plugins need to updated. But, it’s a dev env so hey.

    > btw Iā€™m using Avada theme. Not divi theme. Should work as well on Avada?

    Using Avada. Yes. That goes without saying.

    If you review the code from my live demo and Ayanize’s live demo you should notice they are pretty theme agnostic. Mine obviously is because it’s running on CodePen. You will need to swap in your classes and element IDs as needed. The usual biz.

    Enjoy!

    marklchaves
    Participant
    Post count: 873

    > For Avada they explain how to make a one page website with menus here:
    https://theme-fusion.com/documentation/avada/pages/setting-up-one-page-parallax/

    But they say nothing about the highlight issue.

    Actually, I should have thought about this. Avada has this one page site highlighting menu feature built-in. If you follow the instructions on the page you linked to, you should be fine.

    https://theme-fusion.com/documentation/avada/pages/setting-up-one-page-parallax/

    If you follow-step 4 that should automagically solve your highlighting issue. See the live demo referenced on that same page.

    https://avada.theme-fusion.com/landing-product/

    Good luck.

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