page scroll to id with an additional page – menu active colour

  • Resolved Storm Digital

    (@stormdigital)


    6 years, 9 months ago

    Hi

    I have a single page where the scroll to id is working well. I have the following CSS to set the active link to yellow.

    /* hightlight the active menu link to work with page-scroll-to-id */
    .main-navigation a:hover, a.mPS2id-highlight {
    color: #F7ED42 !important;
    }

    How do I set the active link to yellow when the “contact” menu is active.

    Kind regards,
    Andrea

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author malihu

    (@malihu)

    Hi,

    Try this: 

    .main-navigation .main-nav ul li.menu-item[class*="current-menu-"] > a:not(._mPS2id-h){
    color: #F7ED42;
}

    I’d suggest to avoid using !important in your CSS. It’s usually better to write more specific CSS selectors.
    To do this, remove the CSS code you already have and the one I posted above and replace them with: 

    /* hightlight the active menu link to work with page-scroll-to-id */
.main-navigation .main-nav ul li.menu-item > a:hover, 
.main-navigation .main-nav ul li.menu-item > a.mPS2id-highlight, 
.main-navigation .main-nav ul li.menu-item[class*="current-menu-"] > a:not(._mPS2id-h){
    color: #F7ED42;
}

    Let me know if it worked

    Thread Starter Storm Digital

    (@stormdigital)

    Thanks – Works perfectly! You’re awesome!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘page scroll to id with an additional page – menu active colour’ is closed to new replies.