-
Replies
Title says it all! Thanks!
Michael Forcer
over 5 years ago
If you are using SASS just change the following variable:
$topbar-bg-color: #333;
Trying To Be Helpful
over 5 years ago
CSS
.top-bar { background: red } /* = just the regular area */ .contain-to-grid { background: yellow } /* = the outside area (if you are using this) */ .top-bar-section ul { background: orange } /* = the navigation sections (if you are using) */
~
So, you may want to combine them all into one declaration =
.contain-to-grid, .top-bar, .top-bar-section ul, .top-bar-section li:not(.has-form) a:not(.button) { background: green }
To make everything the same color.
Jon Friedrich
over 5 years ago
Fantastic! Thanks everyone
I ended up needing to add
.top-bar.expanded .title-area
for when the menu is expanded in mobile view. Final code is below.
.top-bar.expanded .title-area, .contain-to-grid, .top-bar, .top-bar-section ul, .top-bar-section li:not(.has-form) a:not(.button) { background: green }
Ryan Hellerud
about 5 years ago
Hi guys I tried using sass however when i go to change the _settings.scss file for $topbar-bg-color, it only changes a portion of my web sites color that include the links. It does not include the entire top bar from where i have my logo. Anyone have an idea why this might be?
// Background color for the top bar
$topbar-bg-color: purple;
$topbar-bg: $topbar-bg-color;
<nav class="top-bar" data-topbar> <ul class="title-area"> <li class="name"> <span><a href="#"><img class="logo" src="img/omegalogogood.png"></a><span> </li> <li class="toggle-topbar menu-icon"> <a href="#">Menu</a> </li> </ul> <section class="top-bar-section"> <ul class="right"> <li><a href="#pricing">About us</a></li> <li><a href="#">Contact us</a></li> <li class="has-dropdown"> <a href="#">Services</a> <ul class="dropdown"> <li><a href="#">Web Development</a></li> <li><a href="#">Print Media</a></li> <!-- <li class="active"><a href="#">Active link in dropdown</a></li> --> </ul> </li> </ul> </section> </nav>
Rafi Benkual
about 5 years ago
Doing this with Sass is way easier. There are steetings for link colors, dropdowns, active and more
Scroll to customize with Sass
Armando Roque
over 4 years ago
Hello everyone,
with this its working:
.top-bar.expanded .title-area, .contain-to-grid, .top-bar, .top-bar-section ul, .top-bar-section li:not(.has-form) a:not(.button) { background: green ;}
but when i try
.top-bar.expanded .title-area, .contain-to-grid, .top-bar, .top-bar-section ul, .top-bar-section li:not(.has-form) a:not(.button) { background: transparent !important;}
its not making everything transparent... any help?
Rafi Benkual
over 4 years ago
The background for the .name
is inherited from the topbar background. So setting a color to it will work better.
.top-bar { .name { background: #fff; } }
or instead make the top-bar background: transparent
.top-bar { background: #fff; }
Or if you want them to be different, override name after like this
http://codepen.io/rafibomb/pen/GJqyzP?editors=110
Hey bro I have just targeted it directly in my scss file.
.top-bar { // this targets the bar itself
background-color: #whatevercolouryouwant;
}
.top-bar-section {
ul { li:not(.has-form) a:not(.button) { // this targets the colour of your list items in the navbar background-color: #whatevercolouryouwant; &:hover { // this targets there hover state. background-color: #000; } } }
}
.top-bar.expanded .title-area { // target the bar on a smaller view port
background-color: #whatevercolouryouwant;
}
There may be a better way but this works for me!
Hope that helps,
Richard