[dmcleman]

I’ve created a child theme and modified the css but I can’t change the color of the menu bar.

The color of the menu bar appears to be fixed by the color scheme chosen in the theme options and this seems to over-ride anything that I add to style.css.

For the particular color-scheme setting that I’ve chosen, I’ve tried making changes to the relevant css file in ‘Colors’ on the server but these are also over-ridden.

Could you tell me please if there’s another step that I’m missing?

[Sakin]

@dmcleman: You can see it in style.css of parent theme. There is gradient background. So, you need to change as below:

#branding #access,
#colophon #access-footer {
	background: #3d3d3d; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#585858, #3d3d3d);
	background: -o-linear-gradient(#585858, #3d3d3d);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#585858), to(#3d3d3d)); /* older webkit syntax */
	background: -webkit-linear-gradient(#585858, #3d3d3d);
}

Or you need to change as:

#branding #access,
#colophon #access-footer {
	background: none #3d3d3d;
}

[dmcleman]

Thank you, it worked!

[dmcleman]

Thank you for updating the parent theme! Of course I was prepared to make the modifications in the parent style.css in order to preserve my child theme styles, but is there a more permanent solution to switching off the color scheme for the menu bar? Such as a ‘No colour theme’ option?

[Sakin]

@dmcleman: Sorry there is no color option. So, you need to change the color either using Custom CSS box at Theme Options panel or by building child theme and adding css in child theme style.css

[tiredgit]

I’m trying to use the code shown above. Where can I find the code to apply the opposite gradient to highlighted menu item?

Also I get a single blue line between my 2 menu entries. How do I remove it?

David

http://www.davidparton.co.uk

Edited to add link

[Sakin]

Hello David,

You can try adding in the following css in “Appearance => Theme Options => Custom CSS” box.

/* For Menu Hover and Active Background Color */
#branding ul.menu li:hover > a,
#branding ul.menu a:focus,
#branding .menu .current-menu-item > a, 
#branding .menu .current-menu-ancestor > a, 
#branding .menu .current_page_item > a, 
#branding .menu .current_page_ancestor > a {
	background: #408A8B; /* Show a solid color for older browsers */
	background: -moz-linear-gradient(#036566, #408A8B);
	background: -o-linear-gradient(#036566, #408A8B);
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#036566), to(#408A8B)); /* Older webkit syntax */
	background: -webkit-linear-gradient(#036566, #408A8B);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#036566', endColorstr='#408A8B'); /* for IE */
}
/* Remove Border left in Menu */
#branding ul.menu li {
    border-left: none
}

Regards,
Sakin

[tiredgit]

Brilliant, thanks

[Author]

Posts