Menu icon Foundation
Change menu top-bar background color

Change menu top-bar background color
I am using foundation 5.4,
Want to change the background color of the navigation top bar.
I have tried
.top-bar {
background: #FFF; }
and
.top-bar-section ul li>a {
background:#FFF;
}
I could not able to change it.

But finally
I have style the individual ul link
‘a href="#" style="background-color:#FFF;">Accommodations</a’
It works

Please let me know that is there any other way I could do?

Change menu top-bar background color

Change menu top-bar background color
I am using foundation 5.4,
Want to change the background color of the navigation top bar.
I have tried
.top-bar {
background: #FFF; }
and
.top-bar-section ul li>a {
background:#FFF;
}
I could not able to change it.

But finally
I have style the individual ul link
‘a href="#" style="background-color:#FFF;">Accommodations</a’
It works

Please let me know that is there any other way I could do?

K Lim about 5 years ago

If you use sass/compass, you can change the variable $topbar-bg-color to the color of your choice.

Check the documentation here:
http://foundation.zurb.com/docs/components/topbar.html

aj about 5 years ago

I am not familiar with sass/compass,

I am trying to use custom made style sheet.
Try to change the background colour of top-bar and top-bar-section class.

JCJ80 about 5 years ago

I spent a lot of time restyling the topbar with CSS overrides, in the end it was taking too long and I knew it wasn't the way to do it.

So from what I had learnt about responsiveness etc I decided to go alone and create a new top to look and feel how I needed to.

Then after that I read this posting http://foundation.zurb.com/forum/posts/11597-how-to-install-grunt-and-libsass-on-windows

If I had read that before it would have saved me some time and you could do what K Lim suggested, which is unbelievably straight forward (once you get it up and running)