Avada Forums Community Forum Multiple header/menu items highlighted

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • sparkleninja
    Participant
    Post count: 3

    I am experiencing issues with header/menu highlighting.

    I have a mixture of links in my menu, some anchor links which scroll down the page, and absolute links which link to a different page.

    I have followed the documentation found here for “Linking To A Section On Another Page” (which is my intention).
    https://theme-fusion.com/documentation/avada/special-features/anchor-scrolling/

    The links work well, however the issue is that multiple elements in the header are highlighted simultaneously.

    The two menu links which are giving me trouble are as follows:
    Home (http://localhost:8888/wordpress/#intro) and podcast (http://localhost:8888/wordpress/#podcast).

    No matter what I seem to do, both these header links remain highlighted.

    dekofee
    Participant
    Post count: 10

    Have the same problem. Where you able to solve this?

    azimmermanwpsci
    Participant
    Post count: 10

    I’m having this issue as well. It is highlighting each menu item that contains a link to the current page.

    marklchaves
    Participant
    Post count: 873

    Hi,

    Please try to add your menu anchors (CSS IDs) to the container options setting.

    https://theme-fusion.com/documentation/avada/pages/anchor-scrolling/

    Make sure you use unique IDs if you have some set up already. The CSS IDs must be unique to a page.

    Best of luck!

    stanek
    Participant
    Post count: 1

    My anchor id is in the container options setting, and it is unique. I also tried the Menu Anchor Element option. Still having this same problem.
    http://tims19.sg-host.com/
    http://tims19.sg-host.com/#services

    marklchaves
    Participant
    Post count: 873

    Hi @stanek,

    You can try adding this CSS to your homepage.

    
    /**
     * Fix the double highlighting issue.
     */
    
    /* Desktop */
    #menu-item-1288 > a {
      border-top-style: none !important;
      color: black;
    }
    
    /* Mobile */
    #mobile-menu-item-1288 > a {
        background-color: #f5f5f5 !important;
    }
    .fusion-mobile-current-nav-item:nth-child(5) > a {
        background-color: #f5f5f5 !important;
    }
    

    Shout if you have any questions.

    marklchaves
    Participant
    Post count: 873

    Hi @stanek,

    You might need this for your footer menu as well (add only on the homepage).

    
    .fusion-footer-widget-area a[href="/#services"],
    .fusion-footer-widget-area a[href="/#services"]:before
    {
      color: #747474 !important;
    }
    
Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.