[Resolved] change hover color on slide out navigation menu toggle

[Sarah]

Hello, trying to change the color of the slideout menu toggle button (the little hamburger menu). Currently, when I hover it changes to white. Have used this guide (https://docs.generatepress.com/article/changing-navigation-colors/), but nothing seems to change the hover on just the menu toggle button, help please! Thank you!

[Tom]

Hi there,

Try this:

.main-navigation .main-nav li.slideout-toggle a:hover {
    background-color: #222;
    color: #fff;
}

[Sarah]

Hey Tom, sorry, that still didn’t work…

[Sarah]

Hi there, just following up on this, I’ve tried a few different options and still nothing works. Thanks!

[Leo]

Can you disable maintenance mode on your site so we can see why it’s not working?

Thanks!

[Sarah]

Okay, it’s off – I’ll leave it this way until tomorrow mid-day. Thanks!

[Leo]

Try:

@media (max-width: 768px) {
    .mobile-header-logo .main-navigation.mobile-header-navigation .menu-toggle {
        color: #343433;
   }
}

[Sarah]

You are a lifesaver, thank you!!!

[Leo]

No problem 🙂

[Author]

Posts