Hover link color different from active link color

  • Resolved giselleyy

    (@giselleyy)


    4 years, 3 months ago

    Hi guys,
    Is there any way I can put a hover link color different from the active link color in the menu?
    I explain: I’ve created a sliding down menu using links as homepageURL/#section, so basically all the menu will be colored as hover/link active in my homepage, apart from the blog (“artigos”) page. However, I want to add a hover color different from the active links color. Any idea on how I can do it?
    If I add in the menu the link #page (without the homepage url) my menu wouldn’t work in my other pages such as the “artigos” page.

    Thank you!

    • This topic was modified 4 years, 3 months ago by giselleyy.
    • This topic was modified 4 years, 3 months ago by giselleyy.

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

Viewing 4 replies - 1 through 4 (of 4 total)

  • Hi Giselle,

    You can use the inspect tools in Chrome to find the element you want to change the hover characteristics to. Then create a new pseudo element with :hover (e.g., h1:hover {color: #fff; } Add this in the theme css file.
    Hope it helps!

    Hey @giselleyy,
    Add the below CSS code in Appearance->Customize->Additional CSS:

    .main-navigation a:hover{
     color: red !important;
 }

    The Below section targets the “Artigos” page menu item, here you can add hover color as per your requirement:
    #menu-item-631 a:hover{
    color: #fff !important;
    }

    Thread Starter giselleyy

    (@giselleyy)

    Thank you very much guys!

    Happy to Help… ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Hover link color different from active link color’ is closed to new replies.