override hamburger hover and visited color on mobile view

[Cynthia]

On the Color customization screen the “Text” setting under Primary Navigation appears to set the color for the
hamburger as the hover and visited color……even though I am trying to override it in CSS as white #ffffff.

I want to use this setting to only set the text color for Desktop view and be able to override the hamburger color on mobile view but this css doesn’t seem to work

@media (max-width: 768px) {
button.menu-toggle {
position: fixed;
right: 5px;
top: 0px;
text-align: left;
font-size:15px;
color:#ffffff;
}
button.menu-toggle:hover {
color:#ffffff;
}
button.menu-toggle:visited {
color:#ffffff;
}
}

[Leo]

Hi there,

Sorry not sure if I fully understand.

Are you trying to change the hamburger toggle color?

Looks like you’ve successfully changed it to #fff already?
https://www.screencast.com/t/o6H7mInuGc

Let me know what I am missing 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Cynthia]

Yes you’re correct, I did change the color to #fff (including the hover and visited also to white) but the green continues to appear as the hamburger’s hover and visited color.

The green on the hamburger is being picked up from the Primary Navigation Text color under customization which is the same setting for the Primary Navigation Text color on desktop view.

the @media {} doesn’t seem to work

I emailed you my sceenshots.

[Leo]

I don’t see the green as the hover color:
https://www.screencast.com/t/myfg2PKvQz

Your CSS looks like it’s all working for me.

Can you try clearing your browser cache?

You can use a service like this for uploading screenshots next time:
https://postimages.org/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts