Community Forums › Forums › Archived Forums › Design Tips and Tricks › Menu CSS options- not working
- This topic has 6 replies, 2 voices, and was last updated 10 years, 8 months ago by Gary Jones.
-
AuthorPosts
-
July 24, 2013 at 3:04 pm #52321fotodog13Participant
Hi All,
I am using the metric theme, latest wordpress, and studiopress 1.9.2
I am trying to change the background color of one tab and the 2 dropdowns under it to different color than the other pages on the site.I have gone to the Menu>Appearances>Screen Options and selected the css box.
I have added the css class I want to add to these pages - in the menu settings ( CSS Classes)
added them to my style sheet like this#navl1.vespa {
background:#ff00ff!important;
}amongst many other things- all of which have not worked.
When I look in firebug I am not seeing the css class listed at all for the pages I am trying to change here.
Is there something else I need to do to get the css options recognized?
I would really appreciate another set of eyes looking at this, I have been going crazy trying to solve this issue for a couple of
days now with no luck- completely frustrated by it.Heres the site URl
http://69.195.124.59/~prestiu0/I am trying to change the Vespa Piaggio tab on the nav to change the background when it is selected. It is currently red.
I have been able to get the hover to change just fine to green but not the other items.As always many thanks in advance for anyone that can tell me what to do here.
http://69.195.124.59/~prestiu0/August 25, 2013 at 6:48 pm #58805Gary JonesMemberAugust 26, 2013 at 7:52 am #58852fotodog13ParticipantHi Gary ,
Thanks for responding to this post.
I did not get this figured out- but had to make the site live for now. so I moved it
here is the live address.
http://prestigecustomcycleswestchester.com/I am trying to add a tab to the navbar that has a different background color when you hit that tab. I had to keep the pages I am trying to build off the site for now until I could figure out how to do this.
but
if you look at the current site image if you were to go the tab called " Motorcycle Service Work" it would hover to a different color, and the subpages ( dropdown) would show as a different color.I am trying to accomplish that with a new tab I am trying to add to the end of the current nav tabs- after " Motorcycle Service Technicians"
I have tried adding something like this
#menu-item-267 a:hover, #menu-item-267 a:active {
background: none repeat scroll 0 0 #5DC5A9 !important;
}to my style sheet - thinking that the page ( 267) would then show that tab with a different background- hover and active setting but had no luck.
Hope the above to what I am trying to do makes some kind of sense- you love to figure out what I need to do in order to accomplish this so I can add these new pages to the site
Thanks again for taking the time
Best
Scott VAugust 26, 2013 at 6:54 pm #58962Gary JonesMemberIt comes down to selector specificity. The current selector that adds the hover background is
#nav li a:hover
which has a specificity score of 130 (#nav is 100, li, a and :hover are each 10). You either need a selector with higher specificity, or the same specificity but ensure the ruleset goes later on in the style.css file. Your selector of#menu-item-267 a:hover
only as a score of 120.Try the following, ensuring it comes after the ruleset that starts on 709 (bottom of your file is fine):
li#menu-item-256 a:hover, li#menu-item-256 a:active { background-color: #5dc5a9; }
That uses 256 which is one of your existing menu items, so you can see the effect immediately. Obviously change it to another ID once the menu item has been added.
WordPress Engineer, and key contributor the Genesis Framework | @GaryJ
August 29, 2013 at 4:20 pm #59606fotodog13ParticipantHey Gary,
Sorry for the slow response here- I fired the hardrive on one of my computers so I have been dealing with that -
I tried what you have suggested above but did not work on this site- heres the code I usedli#menu-item-259 a:hover,
li#menu-item-259 a:active {
background-color: #5dc5a9;}
added to the above style sheet, below any of the current nav options on the style sheet
* also tried it at the very bottom- last item on the style sheet.- no difference.When I look at this in firebug- After I have added the code to my css file- when I look at the site in Firebug- I do not see the css code
li#menu-item-256 a:hover,
li#menu-item-2596 a:active {
background-color: #5dc5a9;}
showing up in firebug anywhere, even though I have added the above infants to the style sheet.
See it here
prestigecustomcycleswestchester.com
(css style sheet code- line 1254)I also tried the below thinking maybe it would work- but did not.
#nav li#menu-item-256 a:hover,
#nav li#menu-item-2596 a:active {
background: #5dc5a9;* I tried your sample on a different site - also genesis and was able to get it to work on that site correctly -
so have no clue as to why it is not working on this site- when I look at in firebug I do not see my code
added anywhereAny other thoughts on this - driving me crazy?
best
Scott VAugust 30, 2013 at 1:56 am #59664Gary JonesMemberAt this moment in time, the only numbered menu-item I see in the CSS is 267 - so you've either removed it again since answering, or you were updating the wrong file.
Either way, you can see that the 267 code is working - in Firebug, Inspect the Motorcycle Service Work item, and change the ID in Firebug from 257 to 267 - then hover over it and you'll end up with http://d.pr/i/p3P7
WordPress Engineer, and key contributor the Genesis Framework | @GaryJ
August 30, 2013 at 1:56 am #59665Gary JonesMemberAt this moment in time, the only numbered menu-item I see in the CSS is 267 - so you've either removed it again since answering, or you were updating the wrong file.
Either way, you can see that the 267 code is working - in Firebug, Inspect the Motorcycle Service Work item, and change the ID in Firebug from 257 to 267 - then hover over it and you'll end up with http://d.pr/i/p3P7
WordPress Engineer, and key contributor the Genesis Framework | @GaryJ
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.