Community Forums › Forums › Archived Forums › General Discussion › nav-secondary customization color change won't stick
- This topic has 9 replies, 3 voices, and was last updated 8 years, 3 months ago by brock.
-
AuthorPosts
-
June 1, 2015 at 3:52 pm #154442madametutMember
I am a novice user and apologize in advance if this question is poorly worded or posted in the wrong place. I am trying to change the secondary navigation menu bar color to #897d8b to match the color in my custom header of the Lifestyle Pro theme of my site http://www.ParisPalooza.com.
I found this code in the inspect elements area of my Chrome browser:.lifestyle-pro-mustard .nav-secondary {
background-color: #f5d85a;
}When I try out the new color in the Inspect Elements area, it shows the new color working in this temporary area.
But when I then go to Appearance and then Editor and post this code:
.lifestyle-pro-mustard .nav-secondary {
background-color: #897d8b;
}
and then press Update, it says it was updated successfully but then the color does not change.I managed to successfully add a new header image using this technique. I've read all the basics on this topic I could find yet can't figure out what I'm doing wrong. Thank you in advance for any help you can offer this new user.
http://www.parispalooza.comJune 1, 2015 at 3:58 pm #154444brockMemberIt looks like it is being over-ridden further down in your stylesheet. Look in the stylesheet around line 1668 for it and change it there instead.
June 1, 2015 at 4:03 pm #154446madametutMemberThank you and again I apologize that I don't know how to find line 1668. I don't see any line numbers when I open inspect elements.
June 1, 2015 at 4:07 pm #154448brockMemberJust look towards the bottom of the stylesheet for theme colors and the mustard color and make the change there. The background is set there and it overrides what you are adding manually. Let me know if you have anymore trouble finding it.
June 1, 2015 at 4:15 pm #154450madametutMemberOkay, I found line 1668 and when I change the color there in Inspect Element, the change shows up, but when I then copy and paste the new code into Editor and press Update, it doesn't show. It stays mustard yellow. I'm sure it's something simple and I'm just a newby idiot, but for the life of me, I can't see my mistake. Sorry.
June 1, 2015 at 4:21 pm #154455brockMemberNo need to worry. Instead of using inspect element, open the editor and look down towards the bottom of the stylesheet and make the change there. It is the same CSS. What is happening is you have this in your stylesheet:
.lifestyle-pro-mustard .nav-secondary { background: #897d8b; } .lifestyle-pro-mustard .nav-secondary { background-color: #f5d85a; }
The browser receives the first style - higher up in your style sheet - and then it receives the second style which overrides the first one.
June 1, 2015 at 4:39 pm #154459madametutMemberBless you! Thank you! Merci!
And I learned more about css....June 1, 2015 at 5:00 pm #154462brockMemberAwesome!
January 12, 2016 at 3:35 pm #176327akingsmithMemberI'm having a very similar problem to this. Trying to update my menu colour, and I have gone through my entire css style sheet and changed the colours and it still WON'T stick!! I can see it when I go it on Firebox using Firebug, but then on Safari, it won't change.
Can anyone help?? I have no idea what I'm doing wrong and this is beginning to be super frustrating.
January 12, 2016 at 6:05 pm #176331brockMemberCan you link to the site where you're having a problem?
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.