Hi everyone,
A number of users have asked about styling the top menu bar (Foundation's .top-bar class) in particular how to change the colour. This can be done easily by adding the following class definition overrides to html/default.css:
.contain-to-grid,.top-bar,.top-bar a,.top-bar label,.top-bar h1 {
background-color: #009933 !important;
}
.top-bar a:hover {
background-color: #00802B !important;
}The nav bar uses a 2-tone scheme to provide visual feedback on mouse-over (:hover). An easy way to work out a visually appealing :hover color is to use http://www.colorschemer.com/online.html. Use the tool to select your required main background color, and then click "Darken Scheme" once and use the darkened value as the :hover color.
Cheers,
David
--
PriceTapestry.com
Hi,
The hamburger icon is created by Foundation's CSS using:
-webkit-box-shadow: 0 10px 0 1px white, 0 16px 0 1px white, 0 22px 0 1px white;
box-shadow: 0 10px 0 1px white, 0 16px 0 1px white, 0 22px 0 1px white;This is against the CSS selector:
.top-bar .toggle-topbar.menu-icon a::afterSo to override in html/default.css use:
.top-bar .toggle-topbar.menu-icon a::after {
-webkit-box-shadow: 0 10px 0 1px white, 0 16px 0 1px white, 0 22px 0 1px white !important;
box-shadow: 0 10px 0 1px white, 0 16px 0 1px white, 0 22px 0 1px white !important;
}...replacing each instance of "white", with the CSS colour code required e.g. "blue" or a "#rrggbb" value.
Sidenote: whilst checking this out, I have updated the original post to include .contain-to-grid in the selector for the alternative background colour as this wasn't included in the original version of the Foundation based template...
Hope this helps!
Cheers,
David.
--
PriceTapestry.com
Thank you for your time. It worked as expected! I wasn't able to find that property with inspector of Chrome/Firefox because I was looking into <span></span>
Hi,
If it helps, you can download a local reference copy of Foundation 5.0.1 from;
http://foundation5.zurb.com/cdn/releases/foundation-5.1.0.zip
The archive contains css/foundation.css which is the non-minified version of html/vendor/foundation.min.css included in the distribution. To override any style definitions within html/default.css use the same CSS selector and include the !important flag as in the above...
Cheers,
David.
--
PriceTapestry.com
I am driving crazy trying to change the color of the hamburger icon.
I have tried to change .top-bar .toggle-topbar.menu-icon with no effect.
Could you help me?