Menu icon Foundation

My Posts

  • 3
    Replies
  • top-bar colour problems

    By Julius Miller

    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 le... (continued)

    Last Reply by Tony Stark over 5 years ago


My Comments

Julius Miller commented on Julius Miller's post over 5 years

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

Posts Followed

No Content

Following

    No Content

Followers

My Posts


My Comments

You commented on Julius Miller's post over 5 years

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

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content