Change storefront menubar

Hei

I would like to make the storefront menu/logo bar white instead of black, with black letters.
Can anybody tell me how to do that.?

Dearest
Jan pihl

Please add this code to override.css and make sure override is enabled in template settings.

Code: Select all

#gkHeaderNav {
    background: #fff none repeat scroll 0 0;
}

#gkTopMenu a {
    color: #222;
}

.gkMenu > ul > li > a {
    color: #222;
}

.gkMenu a:hover, .gkMenu a:active, .gkMenu a:focus, .gkMenu li.active > a {
    color: #666;
}


Put that into my design but the active link is white, it shoul be dark grey if I read the css right?
http://pinsekirkenbetel.no/nyside/index.php/delta/ny

Thank you!

Put that into my design but the active link is white, it should be dark grey if I read the css right?
HOW do i change that - tricky!
http://pinsekirkenbetel.no/nyside/index.php/delta/ny

Put that into my design but the active link is white, it shoul be dark grey if I read the css right?
http://pinsekirkenbetel.no/nyside/index.php/delta/ny

I'm having the same issue. The CSS works great for changing the color of the menu bar and text, but the active link text is white and lost on the white back ground. I'm guessing an additional line of CSS is required for this element.

Found the line in the menu.css, and changed it there, but no luck. still White. There must bes someting else blocking that active link.

Found it!
Put this in instead and it works.

Code: Select all

#gkHeaderNav {
background: #fff none repeat scroll 0 0;
}

#gkTopMenu a {
color: #222;
}

.gkMenu > ul > li > a {
color: #222;
}

.gkMenu a:hover,
.gkMenu a:active,
.gkMenu a:focus,
.gkMenu li.active > a {
color: #666;
}

.gkMenu > ul > li.active > a {
color: #666;   
}

Ha problems with the mobile menu icon to.
Put tis into override.css and into override in the the design-advanced settings.
It wont work it it is not both places - strange

Code: Select all

#gkHeaderNav {
background: #fff none repeat scroll 0 0;
}

#gkTopMenu a {
color: #222;
}

.gkMenu > ul > li > a {
color: #222;
}

.gkMenu a:hover,
.gkMenu a:active,
.gkMenu a:focus,
.gkMenu li.active > a {
color: #666;
}

.gkMenu > ul > li.active > a {
color: #666;   
}

#gkHeader > div:first-child {
   background: #f7f6f6;
}

#gkMobileMenu i {
   color: #666;
   height: 44px;
   padding: 0!important;
   position: relative;
   right: 12px;
   text-align: center;
   width: 44px;
}

Hi

That's a very good solution, but it's enough to have it in override.css. The one from Custom CSS field is not used in Your case anyway: