Hover not working on front end

  • Resolved kaitlinkma

    (@kaitlinkma)


    6 months ago

    Hello,

    My navigation menu (About Services Contact) has white text, but hovers orange on the front-end when I’m “viewing” the site. However, on the back-end, the text correctly hovers blue. I have checked the Style colors, and hover colors at the row and group level and they all show blue. The blockbooster theme colors are blue and orange, so I suspect that’s where the orange is coming from, but I don’t know.

    Somehow I managed to change my Services submenu text color to be black instead of white, but the hover color stubbornly remains orange.

    Any help would be greatly appreciated – I’ve spent hours looking at this and am at a loss.

    Thank you so much!

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

Viewing 4 replies - 1 through 4 (of 4 total)
  • Muhammed Jazeel

    (@jazeelmuhmd)

    Hi @kaitlinkma,

    Hope you are doing well today.

    Do you tried clearing cache?. I think this simple thing will resolve your issue.

    Let me know in replies if you want further assistance in the issue.

    Thank You

    Thread Starter kaitlinkma

    (@kaitlinkma)

    Hello,

    Yes, I tried clearing the cache, but it didn’t work.

    Thank you for the help!

    Hi @kaitlinkma ,
    You’ve got the Hummingbird plugin installed. Somewhere in that plugin’s configuration settings, I found a hover style for the orange color and !important property. This is overriding your blue hover style. Here is the code I’m talking about:
    nav.wp-block-navigation ul li a:hover?{
    color: var(--wp--preset--color--secondary)?!important;
    }

    Try adding your own custom CSS. Let us know what you do!

    • This reply was modified 5 months, 3 weeks ago by askdesign.
    • This reply was modified 5 months, 3 weeks ago by askdesign.
    Thread Starter kaitlinkma

    (@kaitlinkma)

    Hi askdesign,

    Thank you so much for finding that piece of code! I don’t know where you found it in Hummingbird, but long story short, the issue persisted with Hummingbird disabled and I used the below custom CSS someone gave me to solve the issue:

    modal-1-content > ul > .wp-block-navigation-item > a > span:hover, #modal-1-content > ul > li > ul > li > a > span:hover, #modal-1-content > ul > .wp-block-navigation-submenu > a:hover {

    color: #225AE6 !important;
    }

    It now correctly hovers blue.

    Thank you again,

    Kaitlin

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