Menu icon Foundation
Styling the topbar with css only

I have been struggling with this issue for a few days. I am taking the top-bar example from the documentation and trying to change the background of the anchor tags to be a different color. I have found in foundation.css where it would work but it DOES NOT work. Can anyone show me specifically where in their css they have changed the background to remove the black background of their top-bar? I have attached a picture of what I currently have as well as the most logical place I think the css should be changed.

Zurbquestion

Zurbquestion2

topbarstylingcss

I have been struggling with this issue for a few days. I am taking the top-bar example from the documentation and trying to change the background of the anchor tags to be a different color. I have found in foundation.css where it would work but it DOES NOT work. Can anyone show me specifically where in their css they have changed the background to remove the black background of their top-bar? I have attached a picture of what I currently have as well as the most logical place I think the css should be changed.

Zurbquestion

Zurbquestion2
Rafi Benkual over 5 years ago

It is most helpful when using the css version to use the browser inspect element feature. If you taget the element you are looking for it will tell you the css selector that is targeted. https://www.evernote.com/shard/s304/sh/9a8aded2-80ff-4afc-b5dc-d63ee4d652e2/a0b01ab989a4a0197d0641245f5abc89

Example:

.top-bar-section li a:not(.button) {
    background:black;
    color: white;
    }

.top-bar-section li a:not(.button):hover {
    background:red;
    color: white;
    }

ayezee over 5 years ago

Thank you for the reply. I have inspected the element and changed the css class accordingly but not seeing any change in color. Any other suggestions?

Rafi Benkual over 5 years ago

If you use the SASS version this becomes very easy.

In css you need to change a lot of things:

.top-bar {
  overflow: hidden;
  height: 45px;
  line-height: 45px;
  position: relative;
  background: #fff;
  margin-bottom: 0; }
  .top-bar ul {
    margin-bottom: 0;
    list-style: none; }
  .top-bar .row {
    max-width: none; }
  .top-bar form,
  .top-bar input {
    margin-bottom: 0; }
  .top-bar input {
    height: 2.45em; }
  .top-bar .button {
    padding-top: .5em;
    padding-bottom: .5em;
    margin-bottom: 0; }
  .top-bar .title-area {
    position: relative;
    margin: 0; }
  .top-bar .name {
    height: 45px;
    margin: 0;
    font-size: 16px; }
    .top-bar .name h1 {
      line-height: 45px;
      font-size: 1.0625em;
      margin: 0; }
      .top-bar .name h1 a {
        font-weight: bold;
        color: white;
        width: 50%;
        display: block;
        padding: 0 15px; }
  .top-bar .toggle-topbar {
    position: absolute;
    right: 0;
    top: 0; }
    .top-bar .toggle-topbar a {
      color: white;
      text-transform: uppercase;
      font-size: 0.8125em;
      font-weight: bold;
      position: relative;
      display: block;
      padding: 0 15px;
      height: 45px;
      line-height: 45px; }
    .top-bar .toggle-topbar.menu-icon {
      right: 15px;
      top: 50%;
      margin-top: -16px;
      padding-left: 40px; }
      .top-bar .toggle-topbar.menu-icon a {
        text-indent: -48px;
        width: 34px;
        height: 34px;
        line-height: 33px;
        padding: 0;
        color: white; }
        .top-bar .toggle-topbar.menu-icon a span {
          position: absolute;
          right: 0;
          display: block;
          width: 16px;
          height: 0;
          -webkit-box-shadow: 0 10px 0 1px white, 0 16px 0 1px white, 0 22px 0 1px white;
          box-shadow: 0 10px 0 1px white, 0 16px 0 1px white, 0 22px 0 1px white; }
  .top-bar.expanded {
    height: auto;
    background: transparent; }
    .top-bar.expanded .title-area {
      background: #111111; }
    .top-bar.expanded .toggle-topbar a {
      color: #888888; }
      .top-bar.expanded .toggle-topbar a span {
        -webkit-box-shadow: 0 10px 0 1px #888888, 0 16px 0 1px #888888, 0 22px 0 1px #888888;
        box-shadow: 0 10px 0 1px #888888, 0 16px 0 1px #888888, 0 22px 0 1px #888888; }

.top-bar-section {
  left: 0;
  position: relative;
  width: auto;
  -webkit-transition: left 300ms ease-out;
  -moz-transition: left 300ms ease-out;
  transition: left 300ms ease-out; }
  .top-bar-section ul {
    width: 100%;
    height: auto;
    display: block;
    background: #fff;
    font-size: 16px;
    margin: 0; }
  .top-bar-section .divider,
  .top-bar-section [role="separator"] {
    border-bottom: solid 1px #fff;
    border-top: solid 1px black;
    clear: both;
    height: 1px;
    width: 100%; }
  .top-bar-section ul li > a {
    display: block;
    width: 100%;
    color: white;
    padding: 12px 0 12px 0;
    padding-left: 15px;
    font-size: 0.8125em;
    font-weight: bold;
    background: #fff; }
    .top-bar-section ul li > a.button {
      background: #fff;
      font-size: 0.8125em;
      padding-right: 15px;
      padding-left: 15px; }
      .top-bar-section ul li > a.button:hover {
        background: #fff; }
    .top-bar-section ul li > a.button.secondary {
      background: #fff; }
      .top-bar-section ul li > a.button.secondary:hover {
        background: #fff; }
    .top-bar-section ul li > a.button.success {
      background: #fff; }
      .top-bar-section ul li > a.button.success:hover {
        background: #fff; }
    .top-bar-section ul li > a.button.alert {
      background: #fff; }
      .top-bar-section ul li > a.button.alert:hover {
        background: #fff; }
  .top-bar-section ul li:hover > a {
    background: #fff;
    color: white; }
  .top-bar-section ul li.active > a {
    background: #fff;
    color: black; }
  .top-bar-section .has-form {
    padding: 15px; }
  .top-bar-section .has-dropdown {
    position: relative; }
    .top-bar-section .has-dropdown > a:after {
      content: "";
      display: block;
      width: 0;
      height: 0;
      border: inset 5px;
      border-color: transparent transparent transparent rgba(255, 255, 255, 0.5);
      border-left-style: solid;
      margin-right: 15px;
      margin-top: -4.5px;
      position: absolute;
      top: 50%;
      right: 0; }
    .top-bar-section .has-dropdown.moved {
      position: static; }
      .top-bar-section .has-dropdown.moved > .dropdown {
        display: block; }
  .top-bar-section .dropdown {
    position: absolute;
    left: 100%;
    top: 0;
    display: none;
    z-index: 99; }
    .top-bar-section .dropdown li {
      width: 100%;
      height: auto; }
      .top-bar-section .dropdown li a {
        font-weight: normal;
        padding: 8px 15px; }
        .top-bar-section .dropdown li a.parent-link {
          font-weight: bold; }
      .top-bar-section .dropdown li.title h5 {
        margin-bottom: 0; }
        .top-bar-section .dropdown li.title h5 a {
          color: white;
          line-height: 22.5px;
          display: block; }
    .top-bar-section .dropdown label {
      padding: 8px 15px 2px;
      margin-bottom: 0;
      text-transform: uppercase;
      color: #555555;
      font-weight: bold;
      font-size: 0.625em; }

.top-bar-js-breakpoint {
  width: 940px !important;
  visibility: hidden; }

.js-generated {
  display: block; }

@media only screen and (min-width: 940px) {
  .top-bar {
    background: #fff;
    *zoom: 1;
    overflow: visible; }
    .top-bar:before, .top-bar:after {
      content: " ";
      display: table; }
    .top-bar:after {
      clear: both; }
    .top-bar .toggle-topbar {
      display: none; }
    .top-bar .title-area {
      float: left; }
    .top-bar .name h1 a {
      width: auto; }
    .top-bar input,
    .top-bar .button {
      line-height: 2em;
      font-size: 0.875em;
      height: 2em;
      padding: 0 10px;
      position: relative;
      top: 8px; }
    .top-bar.expanded {
      background: #fff; }

  .contain-to-grid .top-bar {
    max-width: 62.5em;
    margin: 0 auto;
    margin-bottom: 0; }

  .top-bar-section {
    -webkit-transition: none 0 0;
    -moz-transition: none 0 0;
    transition: none 0 0;
    left: 0 !important; }
    .top-bar-section ul {
      width: auto;
      height: auto !important;
      display: inline; }
      .top-bar-section ul li {
        float: left; }
        .top-bar-section ul li .js-generated {
          display: none; }
    .top-bar-section li.hover > a:not(.button) {
      background: #fff;
      color: white; }
    .top-bar-section li a:not(.button) {
      padding: 0 15px;
      line-height: 45px;
      background: #fff; }
      .top-bar-section li a:not(.button):hover {
        background: #fff; }
    .top-bar-section .has-dropdown > a {
      padding-right: 35px !important; }
      .top-bar-section .has-dropdown > a:after {
        content: "";
        display: block;
        width: 0;
        height: 0;
        border: inset 5px;
        border-color: rgba(255, 255, 255, 0.5) transparent transparent transparent;
        border-top-style: solid;
        margin-top: -2.5px;
        top: 22.5px; }
    .top-bar-section .has-dropdown.moved {
      position: relative; }
      .top-bar-section .has-dropdown.moved > .dropdown {
        display: none; }
    .top-bar-section .has-dropdown.hover > .dropdown, .top-bar-section .has-dropdown.not-click:hover > .dropdown {
      display: block; }
    .top-bar-section .has-dropdown .dropdown li.has-dropdown > a:after {
      border: none;
      content: "\00bb";
      top: 1em;
      margin-top: -7px;
      right: 5px; }
    .top-bar-section .dropdown {
      left: 0;
      top: auto;
      background: transparent;
      min-width: 100%; }
      .top-bar-section .dropdown li a {
        color: white;
        line-height: 1;
        white-space: nowrap;
        padding: 7px 15px;
        background: #fff; }
      .top-bar-section .dropdown li label {
        white-space: nowrap;
        background: #fff; }
      .top-bar-section .dropdown li .dropdown {
        left: 100%;
        top: 0; }
    .top-bar-section > ul > .divider, .top-bar-section > ul > [role="separator"] {
      border-bottom: none;
      border-top: none;
      border-right: solid 1px #fff;
      border-left: solid 1px #fff;
      clear: none;
      height: 45px;
      width: 0; }
    .top-bar-section .has-form {
      background: #fff;
      padding: 0 15px;
      height: 45px; }
    .top-bar-section ul.right li .dropdown {
      left: auto;
      right: 0; }
      .top-bar-section ul.right li .dropdown li .dropdown {
        right: 100%; }

  .no-js .top-bar-section ul li:hover > a {
    background: #fff;
    color: white; }
  .no-js .top-bar-section ul li:active > a {
    background: #fff;
    color: white; }
  .no-js .top-bar-section .has-dropdown:hover > .dropdown {
    display: block; } }

Then you need to change the text color color: black; or whatever you want.

You can copy paste this css over yours to get you closer.

ayezee over 5 years ago

I appreciate the code. I have since went through and found a way to rework it. Awesome!

Sandra Isgren over 5 years ago

The given code helps me with everything except one issue: changing the hover color for the top bar. Any ideas?

EDIT: Sometimes just asking the question out loud helps;

.top-bar-section li:not(.has-form) a:not(.button):hover {
background: #whatever; }

Tushar Khatiwada over 5 years ago

You can override the style by using the following code:

.top-bar ul li a {
  background-color: #ff6600 !important;
} 

Mine woked using this.

Yee Loong over 5 years ago

I end up doing something like this, even though I kinda cringe to use that many !important in my CSS codes

@media only screen and (min-width:48.063em) {
  .top-bar { background: white; }
  .contain-to-grid { background: white; }
  .top-bar ul li a { color: #303030; background: #ffffff !important; }
  .top-bar-section ul li.active > a { background: #22C0E8 !important; }
  .top-bar-section ul li.active > a:hover { color: #303030 !important; background:#21c5ed !important; }
  .top-bar-section li a:not(.button):hover { color: white; background:#22C0E8 !important; }
}

Random Freeform over 5 years ago

I'm looking to change the 'active' menu item..

(typically blue by default)
Thanks for any tips!...

Random Freeform over 5 years ago

Got it...
Doh, it was sitting there just above my request.

.top-bar-section ul li.active > a {
background: #ffffff !important;
color: black !important;
}

(Thanks everyone, this is useful stuff until I/we find time to embrace sass.)

ayezee about 5 years ago

Has anyone ran into the background color changing on the parent element with a drop down on hover?

Jeff Kinley about 5 years ago

What if you are using the SASS version? I tried changing all the top-bar bg items in settings.scss, but it is not working.

Rafi Benkual about 5 years ago

Jeff - Are you running compass watch? or for libsass - grunt

Any sass errors?

Fulup Ar Foll over 4 years ago

While this is an old post, here after a simplified version for SCSS/CSS.

  • I add a new class name in my top bar element definition
  • I change background color on that class in CSS

In this example I set a dynamic custom class gtb-topmenu-loa-?? where ?? is the LOA (Level Of Assurance) of my session [Laravel Blade Syntaxt]. As a result depending my LOA my custom class change from: topmenu-loa-1, topmenu-loa-2...

<li class="has-dropdown topmenu-loa-{{Auth::loa()}}">
<a href="#">{!! Auth::User()->pseudonym !!}</a>
<ul class="dropdown">
<li><a href="/user/profile/dashboard">{!! lang::get ('login.top-profile') !!}</a></li>
<li><a href="/auth/local/logout">{!! lang::get ('login.top-logout') !!}</a></li>
</ul>

Then in My CSS I specify a different colour for each class of LOA

  .topmenu-loa-0 > a{
    background-color: greenyellow !important;
  }
  .topmenu-loa-1 > a{
    background-color: yellow !important;
  }
  .topmenu-loa-2 > a{
    background-color: orange !important;
  }
  .topmenu-loa-3 > a{
    background-color: orangered !important;
  }

Result when my session LOA change, the background colour of my button change automatically without any JavaScript.

Joseph over 4 years ago

This single issue has all but turned me away from Foundation. I am hoping the rest of the framework is better then this.

It takes 10 minutes to look up all of the elements to overwrite. Why is the nav background black, then the li elements are background:black on top of the nav background:black? So it's black on black? It requires 2x the css to get a very basic result. Furthermore some of the css selectors, are they even selectors? Is it supported in all browsers?

Rafi Benkual over 4 years ago

@joseph - not sure what you mean? The selectors are more specific in top-bar because it does a lot of things really well. It was written in Sass with lots of variables to customize it. When that is compiled to CSS it makes a ton of selectors. So with all it's magic comes complexity. It's a balancing act.

The easiest way to find the selector is to use the inspector if you are using standard CSS.

In the next version we'll be using a simpler menu bar that maybe does less things automatically but is quicker to style.

Yucel over 4 years ago

Hello Rafi,

I am having an issue with the following selector: " .top-bar-section ul li > a:hover "

The hover state did not exist in the original css file so I have added it myself but it made no difference whatsoever.

I also wanted to make the navbar taller and I modified the .top-bar {height: } selector but in that case the "a" links stayed smaller and I cannot get them adjust to the height of its parent. Please see below.

http://i.imgur.com/XeEmptU.png

How can I target the hover state so it will work? Also, what would be the best way to get the links to fill the height of the parent div?

Many thanks.

Rafi Benkual over 4 years ago

I think this is what you're looking for:

.top-bar-section li:not(.has-form) a:not(.button):hover {
  background: #333333;
}

Yucel over 4 years ago

Hello,

Thanks for your reply. Unfortunately, that didn' t work. Below is my HTML:

  <div class="row">
  <nav class="top-bar" data-topbar>
    <ul class="title-area">
    <li class="name"></li>
    <li class="toggle-topbar menu-icon"><a href="Menu"></a></li>
    </ul>

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

    <ul class="center">
      <li class="active"><a href="#">HOME</a></li>
      <li><a href="#">ABOUT</a></li>
      <li><a href="#">PRODUCTS</a></li>
      <li><a href="#">LOCATION</a></li>
      <li><a href="#">CONTACT</a></li>
    </ul>
    </section>
  </nav>
  </div>   

Am I missing something?

Yucel over 4 years ago

Actually, I had built my perfect nav but it is based on icon-bar element however, it is not responsive :(

Is there any way that I can make my existing (icon-bar) nav responsive as the top bar? or should I mıdify the top bar instead?

Yucel over 4 years ago

Ok. When I used !important it worked but is it not suppose to do the same thing with " .top-bar-section ul li > a:hover " ?

I found the selector you provided bit confusing.