Menu icon Foundation
Change menu-icon color without using SASS

I am currently using Foundation 5, WITHOUT SASS. I was wondering where in the css I can change the menu-icon color? (the hamburger 3 lines). I have seen posts about how to change it with SASS, but haven't had any luck finding out where in the css i change it.

cssmenu iconstyling

I am currently using Foundation 5, WITHOUT SASS. I was wondering where in the css I can change the menu-icon color? (the hamburger 3 lines). I have seen posts about how to change it with SASS, but haven't had any luck finding out where in the css i change it.

Sam Stevens over 5 years ago

The class is: .top-bar .toggle-topbar.menu-icon a span

Change the color of the shadow.

Martin Kearn over 5 years ago

Hi,

Thanks for this - just a little more detail for anyone reading this from the future. In order to change the colour of the menu icon bars to #666666, i used the code below in my CSS:
CSS
a.menu-icon span {
-webkit-box-shadow: 0 10px 0 1px #666666, 0 16px 0 1px #666666, 0 22px 0 1px #666666;
box-shadow: 0px 10px 0px 1px #666666, 0px 16px 0px 1px #666666, 0px 22px 0px 1px #666666;
}

Darrell Roze about 4 years ago

If you are using sass, the lines are looking at are here:

$topbar-menu-icon-color:
$topbar-menu-icon-color-toggled:

They are up around line 1250

shaquel about 3 years ago

the examples that have been set here do not work how do i change the color of the menu-icon do i have to go inside the foundation.css files?

Terry Martin over 2 years ago

Isn't app.css the right place to put anything, superseding whatever's in foundation.css?