CSS colour change not appearing in responsive mode

No… the bottom part of the menu should be the same shade of green as the top! #b9dcc2, not #90B199

Let’s deal with one issue at a time, what’s wrong with the menu image?

Lol… that was the original issue Andrew… the image responsive-nav.png was appearing, but has remained the darker shade of green, despite every other image correctly updating to the lighter shade.

I’m sorry but this was very confusing:

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

Get rid of the background image bit and just put this in:

@media only screen and (max-width: 959px) {
#navigation {
background: #b9dcc2;
}
}

Then you can see if you change that background to “red” it will change its colour

Even when I follow the path above, the image shows in the correct shade of green. Yet on my phone screen it remains the darker shade.

Okay, at this point I think it would be best re-explaining what you are trying to do. If you could link to screenshots illustrating it that would be great

I do apologise for the confusion Andrew, and appreciate your help with this ??

I have pasted in the code you gave, along with the hex code for red… no change. Perhaps there is something overriding the rule?

Okay, I will do… think I’ll have to call it a night for now, though, and come back to this tomorrow. Thanks for your help so far!

Hey Andrew,

So here is the image. As you’ll see, my logo colour and the menu colour are still appearing as two different shades of green:

https://bit.ly/XcY0Yl

Yet the code written in my child theme style sheet is this:

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

As you can see, the image responsive-nav.png is still showing in #90B199, not modifying to #b9dcc2

Other template modifications, such as colour changes for the footer section all show correctly, and are posted like this:

#footer{background:#b9dcc2 url(“images/vintage.png”);padding:40px;font-size:0.929em;position:relative;}

Hope this makes the issue clearer! ??

The issue is that your CSS for the main navigation menu is being overridden by the same rule in a stylesheet named responsive.css. Since responsive.css is loaded after your child theme’s stylesheet, that particular rule in responsive.css wins. A quick fix would be to make the rule in your child theme’s stylesheet more specific like this:

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

Awesome! Thanks so much stephencottontail – that worked a treat ??

Appreciate your help, and yours Andrew… issue resolved.