Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • #1102827

    Hi,

    I want to change the font color of the HOVER state of the ACTIVE menu item in hamburger menu. It is grey now and needs to be white, while the background is dark purple.

    No I have this:

    #av-burger-menu-ul li a:hover {
    color: #FFFFFF !important;
    }
    #top #wrap_all #header .av-burger-overlay #av-burger-menu-ul li.current-menu-item a:hover {
    color: #FFFFFF !important;
    }

    #1103795

    Hey JantienM,

    the code you have is working? Or why are you posting it?
    Help us understand please.

    Best regards,
    Basilis

    #1103879

    Hi Basilis,

    The code is not working because the font color is still grey now and I need it to be white. You can see it in the url I posted as well. It’s only still grey now on an active menu item and then when you hover it, in that state I need it be white as well.

    Hope you can help me out with other coding, thanks.

    • This reply was modified 4 months ago by  JantienM.
    #1104705

    Hi,

    Thanks for the update and sorry for the late reply. Please try this CSS instead:

    .main_menu .current-menu-item .avia-menu-text {
      color:#fff;
    }

    Best regards,
    Rikard

    #1105219

    Hi Rikard,

    Unfortunately this is not working. This changes all active menu items to white, but I need it only for the HOVER state of an active menu item. And then only for the hamburger menu on mobile phone. You can check what I mean by opening the page and making the window smaller.
    So it should be like this:
    Hamburger menu (only visible on mobile phone)

    • standard: white background, grey font
    • active menu item: white background, purple font
    • hover: purple background, white font
    • active menu item, hover: purple background, white font (<– this one is now grey font and needs to be white)
    • This reply was modified 3 months, 3 weeks ago by  JantienM.
    #1105963

    Hi,

    There is no hover state on mobile, but you can target the active state using this CSS:

    #av-burger-menu-ul .current_page_item .avia-menu-text:active {
      color:#fff;
    }

    Best regards,
    Rikard

    #1108186

    Hi Rikard,

    I tried this, but it’s still not working.

    #1108350

    Hi,

    Did you add the code to the very top of quick css so it runs first? Also, be sure to clear the cache a few times over.

    Best regards,
    Jordan Shannon

    #1111266

    Hi Jordan,

    I tried that also, still not working…

    #1111397

    Hi JantienM,

    Best regards,
    Victoria

    #1111866

    Hi Victoria,
    Thanks for your reply. I made two screenshots as well and will explain again the problem:

    http://www.toolkitaandachtsfunctionaris.nl/nieuw2019/hamburger-menu-meldcode-selected.jpg > this is when I select for instance “Meldcode”. This works fine. When I go back to the menu and select the same menu-item again, in this case I select “Meldcode” again, then its purple and unreadable. I want this text to be whit as well:
    http://www.toolkitaandachtsfunctionaris.nl/nieuw2019/ (Purchase code hidden if logged out) .jpg

    #1112411

    Hi JantienM,

    Thank you for clarifying, I tried on an iPhone and in Chrome emulator on a Mac and I cannot reproduce the issue.

    Could you please clear the cache, check again and get back to us.

    Best regards,
    Victoria

    #1118089

    Hi Victoria,

    I cleared my cache and it is still the same. I made a screendump of my phone, you can check it here:
    (Purchase code hidden if logged out) -(iPhone).PNG”>screendump iPhone

    • This reply was modified 2 months, 1 week ago by  JantienM.
    • This reply was modified 2 months, 1 week ago by  JantienM.
    #1118181

    Hi JantienM,

    Best regards,
    Victoria

    #1118298

    I see Victoria, is this when you FIRST click it? Try clicking it now again, THEN the background turns purple, in my case.

    #1118439

    Hi,

    Thanks for the clarification, please try this CSS as well to see if it helps:

    #av-burger-menu-ul .current_page_item .avia-menu-text:visited {
      color:yellow;
    }

    Best regards,
    Rikard

    #1118464

    Hi Rikard,
    The sub meu-items are working fine now, but for the main menu item it’s still the same…

    #1118671

    Hi,

    thanks for the update and sorry for the late reply. You mean that the top level item is purple when you are on the corresponding page, correct? If so then this CSS is causing that to happen:

    li.current-menu-item > a > .avia-menu-text {
        color: #69028f !important;
    }

    It’s coming from your child themes CSS file, please try removing the !important bit to see if that helps. Or you can wrap the CSS in a media query to have it not apply to phone sized screens:

    @media only screen and (min-width: 768px) {
    li.current-menu-item > a > .avia-menu-text {
        color: #69028f;
    }
    }

    Best regards,
    Rikard

    #1134868

    Hi Rikard,

    Thanks so much, this is the solution (I wrapped the CSS in a media query). Thanks a lot!

    #1134990

    Hi,

    I’m glad this was resolved. If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 20 posts - 1 through 20 (of 20 total)

The topic ‘change font color of active hover state hamburger menu item’ is closed to new replies.