CSS in Tetris theme – changing colour of menu in mobile mode!

this the css defining the color.

@media only screen and (max-width: 959px) {

#navigation {
    background: url("../images/responsive-nav.png") no-repeat scroll right center #e73420;
    height: 70px;
    left: auto;
    margin-top: 0;
    position: inherit;
    right: auto;
    top: auto;
    width: 100%;
}
}

note the @media part.This says ‘if the screen is up to 959px wide use this color’
you should effect any changes like this in a child theme to save losing all your changes if the theme is updated.
Use firebug or similar to identify where to make changes

Thanks Marklcm – appreciated.

I am using a child theme as my activated theme – though the CSS for that just points back to style.css of my main theme. Is this incorrect? Perhaps I should copy the entire CSS over to the child theme itself?

as long you are using

@import url("../yourtheme/style.css"); to point to main theme style sheet you will be fine. I havn’t seen any recommendations to copy the entire CSS over to the child theme itself.

just put the @media rule at the bottom of your child theme stylesheet

@media only screen and (max-width: 959px) {
#navigation {
    background: url("../images/responsive-nav.png") no-repeat scroll right center #e73420;
}
}

changing the value for the color to your new value. Be sure to include all { } shown

Thanks – this is all very useful. I’ve made the changes you mention, and all looks great… except – the sub menu items on full screen website are still bright orange when clicked on :-/

Example: hover over ‘About’ tab and select ‘Company Values’. Although, I can’t find any other instances of the #e73420 colour within the style sheet.

Any further ideas on this, please?!

the element you want to change is

#navigation .sf-menu ul li > a:hover {
    background-color: #bf2615;

I am just using firebug to identify the elements. I haven’t checked through the style sheet as this can be laborious. Also the theme may be calling several style sheets, they sometimes do. Changing this value in your child theme will fix it.

Also I think the hover value will just be a different shade red to the one you have been looking for. The browser plugin ColorZilla is a handy tool to use to check these sort of things. Just Google it.

Hey, Sorry for the delay in getting back – and thank you for this! Have downloaded ColourZilla and seen how easy it is!

When you say to change the value in my child theme, is it literally a case of posting the above code (with correct colour value) into the child theme CSS? Again, at the moment all that’s present in a signpost back to the main theme CSS …

Sorry if this is basic stuff – still getting the hang of things!

Yes it does point back to the parent stylesheet in the sense that the styles are @imported over, but you can put your own modifications below this line:

@import url('../wpex-tetris/style.css');

Ah I see! So does that also mean that all my other CSS modifications must be posted directly onto the child theme stylesheet? I did wonder what would happen to mod’s, once I updated the main theme…

Your CSS modifications should be in this Child Theme style.css file. When a theme updates it literally replaces all of the files with new ones, even if no changes are made. So the style.css file of the parent theme will be overwritten.

Well – I’m talking about themes distributed on www.ads-software.com. You need to talk to your theme’s vendors/ authors about this theme really.

Great! Thanks so much Andrew and Marclcm… all sorted ??

good to hear, you are welcome
I think it would be a good idea to mark topic as resolved

All resolved ??