Menu icon Foundation
top-bar colour problems

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?)…

I have tried adding my code here but it never seems to post properly if I do? Below is a screen shot of what I mean instead.

Thanks

Screen shot 2014 05 15 at 11.03.56 am

css top-bar colour

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?)…

I have tried adding my code here but it never seems to post properly if I do? Below is a screen shot of what I mean instead.

Thanks

Screen shot 2014 05 15 at 11.03.56 am

This post has been closed. No new replies can be added.

Tony Stark over 5 years ago

HI
You are trying to change color of dropdown menu right...
So open _top-bar.scss file and locate this variable
$topbar-link-bg: $topbar-bg !default;
Change it to $topbar-bg with your color
$topbar-link-bg: #DF8D52 !default;

If you want to change color of dropdown hover and dropdown list...
Dropdown hover:
$topbar-link-bg-hover: #DF8D52 !default; //Hover
Dropdown-List Background:
$topbar-dropdown-link-bg: #DF8D52 !default;

Julius Miller over 5 years ago

Thanks Tony

Sorry for my lack of knowledge but where can I find the _top-bar.scss file?

I only have .css files in the foundation folder?

I know I need to change the right drop down but I can't seem to do it with my own style.css file.

Below is code from that file (I hope it comes through OK). As you can see I am just trying all sorts of combinations - but just not the right one…

@charset "UTF-8";

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

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

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

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

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

.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;
}

Thanks

Tony Stark over 5 years ago

HI
Well you are using css version of foundation,
if you want to make your custom styles then i recommend you use SASS version of foundation.
http://foundation.zurb.com/docs/sass.html
Otherwise changing into css will cause more problem on your project.


To change Background of menu

.top-bar-section li:not(.has-form) a:not(.button) {
    background: none repeat scroll 0 0 RED;
    line-height: 55px;
    padding: 0 18.3333px;
}
.top-bar-section .has-form {
    background: none repeat scroll 0 0 RED;
    height: 55px;
    padding: 0 18.3333px;
}

http://s4.postimg.org/ecmz9xpa5/bgg.png