Menu icon Foundation
How to change the colours of the off-canvas menu icon

Hi

Im developing a new mobile site and am new to the Foundation code. Im specifically looking for some help in changing the colours of menu icon on the off-canvas navigation.

I have found where to change the tab-bar background colour to white but am wondering if the foundation.css file allows me to change the default hamburger menu icon to have grey lines which then changes to black lines on hover.

Does anyone have the experience of changing this ?

Thanks
Andy jones

Hi

Im developing a new mobile site and am new to the Foundation code. Im specifically looking for some help in changing the colours of menu icon on the off-canvas navigation.

I have found where to change the tab-bar background colour to white but am wondering if the foundation.css file allows me to change the default hamburger menu icon to have grey lines which then changes to black lines on hover.

Does anyone have the experience of changing this ?

Thanks
Andy jones

James Dullaghan almost 6 years ago

Andy!

For SCSS: In the settings.scss file there should be a variable named $tabbar-menu-icon-color.

For CSS: In the foundation.css file, you'll look for a.menu-icon span (line 3966) where you can change the box-shadow, which is what is used to generate the hamburger icon.

Hope this helps!
-James D.

Andrew almost 6 years ago

Thanks James

i had already looked there and it was right in front of me so thanks for confirming.

Andy Jones

ayezee about 5 years ago

I have tried changing the CSS as mentioned and no luck?
CSS
.tab-bar .menu-icon span {
position: absolute;
display: block;
height: 0;
width: 1rem;
line-height: 1;
top: 0.9375rem;
left: 0.90625rem;
box-shadow: 0 0px 0 1px #333, 0 7px 0 1px #333, 0 14px 0 1px #333 !important; }
.tab-bar .menu-icon:hover span {
box-shadow: 0 0px 0 1px #333, 0 7px 0 1px #333, 0 14px 0 1px #333; }

rivet over 4 years ago

there is a color for each bar

a.menu-icon span {
box-shadow: 0 10px 0 1px grey, 0 16px 0 1px grey, 0 22px 0 1px grey;
}