La fondation 5: top-bar - modifier l'arrière-plan et passez de style pour le menu mobile

J'ai changé la barre supérieure de regarder la façon dont je le veux. Mais lorsque s'est effondré, le menu mobile ne présente pas les mêmes couleurs (je veux utiliser un blanc bg, et un simple vol stationnaire, mais le bg est gris foncé (doit être blanc), et le hover est blanc, ce qui est correct), je ne vois pas où changer de!

Voici ce que j'ai à ce jour:

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 personnalisé

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

OriginalL'auteur thurzo101 | 2014-04-24

  1. 4

    C'est un peu déroutant (comme vous le feriez pense que c'est l'ul) mais j'ai trouvé que vous pouvez changer la couleur de fond ainsi :

    .top-bar-section ul li>a {
  background-color:white;
}
    Merci beaucoup, c'est exactement ce que je cherchais.
    !l'important est important

    OriginalL'auteur Intellidroid

  2. 14

    Voici la feuille de triche pour changer la couleur de la barre supérieure de la Fondation (gardez à l'esprit que !important; est nécessaire sinon ça ne fonctionnera pas:

    .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;   
}
    Grâce à cette aide, mais vous pouvez éviter d'avoir à utiliser important! en étant plus certains: c'est à dire .top-bar .top-bar-section li a:not(.button) { } etc

    OriginalL'auteur Syafiq Zainal

  3. 3

    Pour ceux qui utilisent SASS + Fondation 5, vous pouvez ouvrir _settings.scss et d'attribuer une couleur à $topbar-dropdown-bg.

    OriginalL'auteur nu everest

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

    Cela a changé le menu actif de la couleur pour moi, mais dans la Fondation 6.

    OriginalL'auteur bdfin