It is a little confusing (as you would think it is the ul) but I found you can change the background colour thus :
.top-bar-section ul li>a {
background-color:white;
}
Question
I have successfully changed the top-bar to look how I want it. But when collapsed, the mobile menu does not show the same colors (I want to use a white bg, and a simple hover, but the bg is dark grey (should be white), and the hover is white, which is correct) I can't see where to change them!
Here's what I have so far:
HTML
<div class="nav-contain">
<div class="contain-to-grid">
<nav class="top-bar" data-topbar>
<ul class="title-area">
<li class="name"><h1><a href="/">SITE TITLE</a></h1></li>
<li class="toggle-topbar menu-icon"><a href="#"></a></li>
</ul>
<section class="top-bar-section">
<ul class="left">
<ul>
<?php foreach($pages->visible() AS $p): ?>
<li><a<?php echo ($p->isOpen()) ? ' class="active"' : '' ?> href="<?php echo $p->url() ?>"><?php echo html($p->title()) ?></a></li>
<?php endforeach ?>
</ul>
</ul>
</section>
</nav>
</div>
</div>
SCSS
//Background color for the top bar
$topbar-bg-color: #fff;
$topbar-bg: $topbar-bg-color;
//Height and margin
$topbar-height: 45px;
$topbar-margin-bottom: 50px;
$topbar-title-weight: 300;
$topbar-title-font-size: rem-calc(17);
//Set the link colors and styles for top-level nav
$topbar-link-color: #333;
$topbar-link-color-hover: #333;
$topbar-link-color-active: #222;
$topbar-link-color-active-hover: #fff;
$topbar-link-weight: 300;
$topbar-link-font-size: rem-calc(16);
$topbar-link-hover-lightness: 0%; // Darken by 10%
$topbar-link-bg: $topbar-bg;
$topbar-link-bg-hover: #fff;
$topbar-link-bg-active: $primary-color;
$topbar-link-bg-active-hover: scale-color($primary-color, $lightness: 0%);
$topbar-link-font-family: $body-font-family;
$topbar-link-text-transform: uppercase;
$topbar-link-padding: $topbar-height / 3;
$topbar-menu-link-weight: normal;
$topbar-menu-link-color: #333;
$topbar-menu-icon-color: #333;
$topbar-menu-link-color-toggled: #333;
$topbar-menu-icon-color-toggled: #888;
Custom CSS
.nav-contain {
margin-top: 30px;
}
.top-bar .top-bar-section li:hover > a {
text-decoration: none;
position: relative;
}
.top-bar .top-bar-section li:hover > a:after {
content: '';
width: 100%;
position: absolute;
left: 0;
bottom: -2px;
border-width: 0 0 1px;
border-style: solid;
}
La solution 2
It is a little confusing (as you would think it is the ul) but I found you can change the background colour thus :
.top-bar-section ul li>a {
background-color:white;
}
Autres conseils
Here is the complete cheat sheet to change the colour of top-bar in Foundation (keep in mind that !important; is required otherwise it's won't work:
.top-bar {
background: red;
}
.top-bar-section li a:not(.button) {
background: blue !important;
}
.top-bar-section li a:not(.button):hover {
background: green !important;
}
.top-bar-section ul li.active > a {
background: gray !important;
}
.top-bar-section ul li.active > a:hover {
background: yellow !important;
}
For those using SASS + Foundation 5, you can open _settings.scss
and assign a color to $topbar-dropdown-bg
.
.dropdown.menu .is-active > a {
color: black; }
This changed the active menu colour for me but in Foundation 6.