Question

我已经成功更改了顶栏以了解我的需求。但是当折叠时，移动菜单没有显示相同的颜色（我想使用白色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;
 }

Answer 1

以下是改变基金会顶栏颜色的完整备忘单（请记住！重要;否则需要它才能胜任

.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;   
}

Answer 2

这有点令人困惑（因为你认为它是ul）但我发现你可以改变背景颜色：

.top-bar-section ul li>a {
  background-color:white;
}

Answer 3

对于使用SASS + Foundation 5的用户，您可以打开_settings.scss并为$topbar-dropdown-bg指定颜色。

Answer 4

.dropdown.menu .is-active > a {
color: black; }

这更改了我的活动菜单颜色，但在Foundation 6中。

基础5：顶栏 - 更改移动菜单的背景和悬停样式

4 个答案: