Menu icon Foundation
F6 how do I change menu active/hover condition?

Hopefully this is a straightforward beginner's question...

I have a top-bar menu, it works fine but I'd like to set the current page to a different color.

My html is like this:

<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
    <button class="menu-icon" type="button" data-toggle></button>
    <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="main-menu">
    <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>
            <li class="menu-text">Site Title</li>
        </ul>
    </div>

    <div class="top-bar-right">
        <ul class="menu" data-responsive-menu="drilldown medium-dropdown">
            <li class="active"><a href="#" >HOME</a></li>
            <li><a href="#">ABOUT US</a></li>
            <li><a href="#">MEMBER PROFILES</a></li>
            <li><a href="#">CONTACT US</a></li>
            
        </ul>
    </div>
</div>
            

         

I'm using scss, I can't see how the active colour might be changed in _settings.scss. In my app.scss I have tried adding this sort of thing...

.top-bar {
      background: $menu-background;
  	ul {
    	background: $menu-background;
    	li {
      		background: $menu-background;
        	a {
          		color: $black;
      		}
        }

      li.active a {
        color: red;
      }
  	}
}
            

         

... but that doesn't take effect. I'm surprised that there aren't any predefined settings that cover this. Can anyone provide a hint?

Many thanks

top-baractive

Hopefully this is a straightforward beginner's question...

I have a top-bar menu, it works fine but I'd like to set the current page to a different color.

My html is like this:

<div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
    <button class="menu-icon" type="button" data-toggle></button>
    <div class="title-bar-title">Menu</div>
</div>

<div class="top-bar" id="main-menu">
    <div class="top-bar-left">
        <ul class="dropdown menu" data-dropdown-menu>
            <li class="menu-text">Site Title</li>
        </ul>
    </div>

    <div class="top-bar-right">
        <ul class="menu" data-responsive-menu="drilldown medium-dropdown">
            <li class="active"><a href="#" >HOME</a></li>
            <li><a href="#">ABOUT US</a></li>
            <li><a href="#">MEMBER PROFILES</a></li>
            <li><a href="#">CONTACT US</a></li>
            
        </ul>
    </div>
</div>
            

         

I'm using scss, I can't see how the active colour might be changed in _settings.scss. In my app.scss I have tried adding this sort of thing...

.top-bar {
      background: $menu-background;
  	ul {
    	background: $menu-background;
    	li {
      		background: $menu-background;
        	a {
          		color: $black;
      		}
        }

      li.active a {
        color: red;
      }
  	}
}
            

         

... but that doesn't take effect. I'm surprised that there aren't any predefined settings that cover this. Can anyone provide a hint?

Many thanks

Rafi Benkual over 3 years ago

There are a few pre-defined settings for top-bar

// 34. Top Bar
// -----------

$topbar-padding: 2.5rem;
$topbar-background: #eee;
$topbar-link-color: #fff;
$topbar-input-width: 200px;

$topbar-background: #eee;

Rafi Benkual over 3 years ago

If you are looking for .active built in, 6.2 has this.
Here are the changes in 6.2
https://github.com/zurb/foundation-sites/releases/tag/v6.2.0

You can upgrade then add the variables from:
https://github.com/zurb/foundation-sites/blob/develop/scss/settings/_settings.scss

New variables in menu are:

$menu-item-color-active: $white;
$menu-item-background-active: map-get($foundation-palette, primary);