Zurb Foundation change top-bar colour

Question

I am having trouble changing the top-bar section of a Foundation site to a different colour.

I have created a custom style.css for this.

I can change most of the top-bar color but NOT the right hand drop down list side (I don't have a list on the left). Clicking a link on the drop down changes colour of the nav bar but the nav bar component at the top does not change other than this (hope this makes sense?)...

This is the basic HTML:

<section class="top-bar-section">
        <!-- Right Nav Section -->
      <ul class="right">
        <li class="divider"></li>
        <li class="has-dropdown">
          <a href="#">Sections</a>
          <ul class="dropdown">
            <li><a href="about.html">####</a></li>
            <li class="divider"></li>
            <li><a href="philosophy.html">####</a></li>
            <li class="divider"></li>
            <li><a href="beginning.html">####</a></li>
            <li class="divider"></li>
            <li><a href="#">#####</a></li>
            <li class="divider"></li>
         </ul>
        </li>

        <li class="has-dropdown">
          <a href="#">Links</a>
          <ul class="dropdown">
            <li><a href="#" target="new">####</a></li>
            <li class="divider"></li>
            <li><a href="#" target="new">####</a></li>
            <li class="divider"></li>
            <li><a href="#" target="new">####</a></li>
            <li class="divider"></li>
         </ul>
        </li>

      </ul>
    </section>

This is my attempt at changing it using style.css:

@charset "UTF-8";

.top-bar {
    background-color: #2D4DC7;
}


.top-bar-section ul {
    background-color: #2D4DC7;
}

.top-bar-section ul.right {
    background-color: #2D4DC7;
}


.top-bar-section li a:not(.button) {
    background-color: #2D4DC7;
}


.top-bar-section ul li.active > a {
   background-color: #2D4DC7;

/** Changes the hover state of non active menu items **/
.top-bar-section li:hover a {
    background-color: #2D4DC7;
}


.top-bar-section ul li > a {
    background-color: #2D4DC7;
}


.top-bar-section ul.dropdown li a:hover:not(.button) {
     background-color: #2D4DC7;
}


.top-bar-section ul.dropdown {
    background-color: #2D4DC7;
}


.top-bar-section .has-dropdown > a:after {
    background-color: #2D4DC7;
}

I am pretty sure it is just syntax that I am having issues with. Something to do with the 'right' class I think???

Any help please?

Many Thanks

Answer 1

I strongly suggest you use a browser such as Firefox with Firebug installed.

Load any page, hit Tools > Web Developer > Inspector (or its hot key equivalent), then click on your object, the HTML code inspector will reference the exact line of the css file that is governing the style being generated (either the style directly, or the computed style).

Time and sanity saver.

Answer 2

After several attempts and some help from Zurb support the CSS i needed was:

.top-bar-section .dropdown li:not(.has-form) a:not(.button) {
      color: white;
      background: #740707;
}

Thanks for the help

Answer 3

If you use the SCSS/SASS version of foundation you should change the defaultvalues for the topbar.

The defaultsettings are stored in _settings.scss.

For example to change it to cornflowerblue I used these settings:

$topbar-bg-color: cornflowerblue;
$topbar-bg: $topbar-bg-color;
$topbar-link-bg-hover: scale-color($topbar-bg, $lightness: -14%);
$topbar-link-bg-active: $topbar-bg;
$topbar-dropdown-bg: $topbar-bg;
$topbar-dropdown-link-bg: $topbar-bg;
$topbar-dropdown-link-bg-hover: scale-color($topbar-bg, $lightness: -14%);