Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • May 21, 2019 at 12:19 pm #1102827
    JantienM

    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;
    }

    May 23, 2019 at 10:02 pm #1103795
    Basilis

    Hey JantienM,

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

    Best regards,
    Basilis

    May 24, 2019 at 10:19 am #1103879
    JantienM

    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 5 years, 7 months ago by JantienM.
    May 28, 2019 at 6:34 am #1104705
    Rikard

    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

    May 29, 2019 at 5:48 pm #1105219
    JantienM

    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 5 years, 6 months ago by JantienM.
    June 1, 2019 at 6:31 am #1105963
    Rikard

    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

    June 7, 2019 at 9:28 am #1108186
    JantienM

    Hi Rikard,

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

    June 8, 2019 at 1:03 am #1108350
    Jordan Shannon

    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

    June 18, 2019 at 11:33 am #1111266
    JantienM

    Hi Jordan,

    I tried that also, still not working…

    June 18, 2019 at 6:30 pm #1111397
    Victoria

    Hi JantienM,

    Best regards,
    Victoria

    June 20, 2019 at 9:36 am #1111866
    JantienM

    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/hamburger-menu-meldcode-selected_selected-again.jpg

    June 21, 2019 at 8:47 pm #1112411
    Victoria

    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

    July 12, 2019 at 1:57 pm #1118089
    JantienM

    Hi Victoria,

    I cleared my cache and it is still the same. I made a screendump of my phone, you can check it here:
    screendump iPhone

    • This reply was modified 5 years, 5 months ago by JantienM.
    July 12, 2019 at 8:48 pm #1118181
    Victoria

    Hi JantienM,

    Best regards,
    Victoria

    July 13, 2019 at 12:37 pm #1118298
    JantienM

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

    July 14, 2019 at 5:37 am #1118439
    Rikard

    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

    July 14, 2019 at 9:26 am #1118464
    JantienM

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

    July 15, 2019 at 5:06 am #1118671
    Rikard

    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

    September 6, 2019 at 10:46 am #1134868
    JantienM

    Hi Rikard,

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

    September 6, 2019 at 4:30 pm #1134990
    Jordan Shannon

    Hi,

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

    Best regards,
    Jordan Shannon

  • Author
    Posts
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.