Foundation 5: top-bar - change the background and hover style for the mobile menu

StackOverflow https://stackoverflow.com/questions/23280971

  •  09-07-2023
  •  | 
  •  

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;
 }
Was it helpful?

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

OTHER TIPS

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top