Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • April 5, 2018 at 7:30 pm #937867
    Martian

    Hi there

    I was wondering if it’s possible to have individual hover/active colors for menu items, e.g. ‘what we do’ is blue (hover and active), ‘who we are’ is green (hover and active) and ‘get in touch’ is pink (hover and active).

    Thanks for your help!

    April 6, 2018 at 8:14 am #938101
    Rikard

    Hey Isabel,

    You should be able to do that, but you need custom CSS for it. If you inspect each menu item you will see that they have separate IDs, you can target each menu item using this. An example for your first menu item would look something like this:

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

#menu-item-3483 .avia-menu-text:hover {
  color:blue !important;
}

    Best regards,
    Rikard

    • This reply was modified 6 years, 7 months ago by Rikard.
    April 6, 2018 at 7:04 pm #938349
    Martian

    Hi Rikard

    That’s great, thanks for your help. It’s working well for the hover state I’m after. The only other request is, that the active menu item also changes color, when on the respective page (as follows):

    – All menu items are grey by default.
    – When hovering over ‘What we do’ it changes to green, when I click it, the ‘What we do’ page opens and ‘What we do’ in the navigation is green (the other items are still grey).
    – When hovering over ‘Who we are’ it changes to blue, when I click it, the ‘Who we are’ page opens and ‘Who we are’ in the navigation is blue (the other items are still grey).
    – When hovering over ‘Get in touch’ it changes to pink, when I click it, the ‘Get in touch’ page opens and ‘Get in touch’ in the navigation is pink (the other items are still grey).

    Thanks in advance
    Isabel

    April 8, 2018 at 5:19 pm #938844
    Mike

    Hi,
    Please try replacing your “header” style css with this:

    /**HEADER**/

#avia-menu .avia-menu-text  {
	color: #444444!important;
}

#menu-item-3483.current_page_item .avia-menu-text,#menu-item-3483 .avia-menu-text:hover {
  color:#e5d130 !important;
}

#menu-item-3464.current_page_item .avia-menu-text,#menu-item-3464 .avia-menu-text:hover {
  color:#31c0d0 !important;
}

#menu-item-3357.current_page_item .avia-menu-text,#menu-item-3357 .avia-menu-text:hover {
  color:#f04f9b !important;
}

    Best regards,
    Mike

    April 8, 2018 at 7:22 pm #938862
    Martian

    Thanks so much, working perfectly!

    April 8, 2018 at 9:57 pm #938891
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.
    For your information, you can take a look at Enfold documentation here
    and the video tutorials here
    And if there are features that you wish Enfold had, you can request them and vote the requested ones here
    For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Hover and active colors for menu items different for each page’ is closed to new replies.