我已经成功更改了顶栏以了解我的需求。但是当折叠时,移动菜单没有显示相同的颜色(我想使用白色bg和简单的悬停,但bg是深灰色(应该是白色),而悬停是白色的,这是正确的)我无法看到改变它们的位置!
这是我到目前为止所拥有的:
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;
自定义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;
}
答案 0 :(得分:14)
以下是改变基金会顶栏颜色的完整备忘单(请记住!重要;否则需要它才能胜任
.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;
}
答案 1 :(得分:4)
这有点令人困惑(因为你认为它是ul)但我发现你可以改变背景颜色:
.top-bar-section ul li>a {
background-color:white;
}
答案 2 :(得分:3)
对于使用SASS + Foundation 5的用户,您可以打开_settings.scss
并为$topbar-dropdown-bg
指定颜色。
答案 3 :(得分:0)
.dropdown.menu .is-active > a {
color: black; }
这更改了我的活动菜单颜色,但在Foundation 6中。