Foundation 5: die top-bar - ändern Sie den hintergrund und hover-Stil für das mobile-Menü

Habe ich erfolgreich geändert, die top-bar, zu schauen, wie ich es will. Aber wenn zusammengebrochen, das mobile-Menü nicht zeigen, die gleichen Farben (ich möchte an einem weißen bg, und einen einfachen hover, aber der bg ist dunkel Grau (sollte weiß sein), und der hover ist weiss, was ist richtig) ich kann nicht sehen, wo Sie zu ändern!

Hier ist, was ich habe, so weit:

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;

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

InformationsquelleAutor thurzo101 | 2014-04-24

  1. 4

    Es ist ein wenig verwirrend (wie würden Sie denken, es ist die ul -) aber ich fand Sie können die Hintergrundfarbe ändern so :

    .top-bar-section ul li>a {
  background-color:white;
}
    Vielen Dank, das war genau was ich suchte.
    !wichtig ist wichtig

    InformationsquelleAutor Intellidroid

  2. 14

    Hier ist die komplette cheat-sheet ändern Sie die Farbe der top-bar-Stiftung (halten Sie im Verstand, dass !wichtig; ist erforderlich, sonst ist es nicht:

    .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;   
}
    Danke, das half, aber Sie können vermeiden, verwenden Sie important! indem Sie mehr spezifische: also .top-bar .top-bar-section li a:not(.button) { } etc

    InformationsquelleAutor Syafiq Zainal

  3. 3

    Für diejenigen, die sich mit SASS + Foundation 5 öffnen Sie _settings.scss und zuweisen einer Farbe zu $topbar-dropdown-bg.

    InformationsquelleAutor nu everest

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

    Dieser verändert das aktive Menü Farbe für mich, aber in der Stiftung 6.

    InformationsquelleAutor bdfin

Schreibe einen Kommentar