Menu icon Foundation
What's the easiest way to change the top bar color?

Title says it all! Thanks!


Title says it all! Thanks!

Richard Matthews over 5 years ago

Hey bro I have just targeted it directly in my scss file.

.top-bar { // this targets the bar itself
background-color: #whatevercolouryouwant;

.top-bar-section {

ul {
  li:not(.has-form) a:not(.button) { // this targets the colour of your list items in the navbar
    background-color: #whatevercolouryouwant;

    &:hover { // this targets there hover state.
      background-color: #000;


.top-bar.expanded .title-area { // target the bar on a smaller view port
background-color: #whatevercolouryouwant;

There may be a better way but this works for me!

Hope that helps,

Michael Forcer over 5 years ago

If you are using SASS just change the following variable:

$topbar-bg-color: #333;

Mario Praga over 5 years ago

Do you have a css solution ?

Trying To Be Helpful over 5 years ago


.top-bar { background: red }  /* =  just the regular area */

.contain-to-grid { background: yellow }  /* =  the outside area (if you are using this) */

.top-bar-section ul { background: orange } /* = the navigation sections (if you are using) */


So, you may want to combine them all into one declaration =

.contain-to-grid, .top-bar, .top-bar-section ul, .top-bar-section li:not(.has-form) a:not(.button) { background: green }

To make everything the same color.

Jon Friedrich over 5 years ago

Fantastic! Thanks everyone

I ended up needing to add

.top-bar.expanded .title-area

for when the menu is expanded in mobile view. Final code is below.

.top-bar.expanded .title-area, .contain-to-grid, .top-bar, .top-bar-section ul, .top-bar-section li:not(.has-form) a:not(.button)  { background: green }

Ryan Hellerud about 5 years ago

Hi guys I tried using sass however when i go to change the _settings.scss file for $topbar-bg-color, it only changes a portion of my web sites color that include the links. It does not include the entire top bar from where i have my logo. Anyone have an idea why this might be?

// Background color for the top bar
 $topbar-bg-color: purple;
 $topbar-bg: $topbar-bg-color;

 <nav class="top-bar" data-topbar>
          <ul class="title-area">
            <li class="name">

              <span><a href="#"><img class="logo" src="img/omegalogogood.png"></a><span>
            <li class="toggle-topbar menu-icon">
              <a href="#">Menu</a>

          <section class="top-bar-section">

            <ul class="right">
              <li><a href="#pricing">About us</a></li>
              <li><a href="#">Contact us</a></li>

                <li class="has-dropdown">
                  <a href="#">Services</a>
                  <ul class="dropdown">
                    <li><a href="#">Web Development</a></li>
                    <li><a href="#">Print Media</a></li>
                    <!-- <li class="active"><a href="#">Active link in dropdown</a></li> -->

Rafi Benkual about 5 years ago

Doing this with Sass is way easier. There are steetings for link colors, dropdowns, active and more

Scroll to customize with Sass

Armando Roque over 4 years ago

Hello everyone,

with this its working:

.top-bar.expanded .title-area, .contain-to-grid, .top-bar, .top-bar-section ul, .top-bar-section li:not(.has-form) a:not(.button) { background: green ;}

but when i try

.top-bar.expanded .title-area, .contain-to-grid, .top-bar, .top-bar-section ul, .top-bar-section li:not(.has-form) a:not(.button) { background: transparent !important;}

its not making everything transparent... any help?

Rafi Benkual over 4 years ago

The background for the .name is inherited from the topbar background. So setting a color to it will work better.

.top-bar {
  .name {
    background: #fff;

or instead make the top-bar background: transparent

.top-bar {
  background: #fff;

Or if you want them to be different, override name after like this