Archived topic
Modify Mobile Menu Icon Color
5 replies · Started by Patrick on April 8, 2020
I have built several sites with GeneratePress but I just don't see where to modify the Menu icon (with 3 lines) for the mobile menu. Do we have to add custom CSS everytime we need to colorize this menu? I would think/hope there is a basic setting I am overlooking. I do not see a setting for Mobile Menu Icon or something similar under colors.
In looking through my previous design CSS files I see this coding:
button.menu-toggle:hover {color: #004fa3;}
Surely, this simple task to colorize the menu icon (and hover) is directly build into GeneratePress? What am I missing?
Hi there,
The menu icon should inherit the menu text setting in Color > Primary Navigation.
We haven't had too many requests on this before so I'm not sure if it's worth an option.
You can use this CSS to change it if you want it different than the primary navigation color:
button.menu-toggle {
color: #000000;
}Adding CSS: https://docs.generatepress.com/article/adding-css/
Let me know if this helps :)
Thanks for the reply Leo. In all my designs (I believe I have 7 - 9 sites with you), I like the plain Menu button to be a different color for the full menu versus the icon. Especially if you add a background color to your menu. Strange no-one has asked before. Oh well, I will just keep using CSS. Appreciate your feedback.
No problem :)
Hi, I'm actually having the same issue. I don't think that we should need to use custom CSS to change the menu-toggle from the mobile header...
In my case Elementor kits' styles are taking over GeneratePress' styles, which is frustrating, as these last ones I think they should have priority over other general styles.
The menu icon should inherit the menu text setting in Color > Primary Navigation.
We are considering adding an option in the future for now the CSS fix is needed.
