Menu CSS options- not working

Community Forums Forums Design Tips and Tricks Menu CSS options- not working

This topic is: not resolved

This topic contains 6 replies, has 2 voices, and was last updated by  Gary Jones 11 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #52321

    fotodog13
    Participant
    Post count: 50

    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/
    #58805

    Gary Jones
    Moderator
    Post count: 686

    Did you get this working?


    Changes in Genesis 2.1 – the ultimate guide to every single change in Genesis Framework 2.1 and 2.1.1 (all 88 of them!) | @GaryJ

    #58852

    fotodog13
    Participant
    Post count: 50

    Hi 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 V

    #58962

    Gary Jones
    Moderator
    Post count: 686

    It 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):
    [css]
    li#menu-item-256 a:hover,
    li#menu-item-256 a:active {
    background-color: #5dc5a9;
    }
    [/css]

    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.


    Changes in Genesis 2.1 – the ultimate guide to every single change in Genesis Framework 2.1 and 2.1.1 (all 88 of them!) | @GaryJ

    #59606

    fotodog13
    Participant
    Post count: 50

    Hey 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 used

    li#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 anywhere

    Any other thoughts on this – driving me crazy?

    best
    Scott V

    #59664

    Gary Jones
    Moderator
    Post count: 686

    At 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


    Changes in Genesis 2.1 – the ultimate guide to every single change in Genesis Framework 2.1 and 2.1.1 (all 88 of them!) | @GaryJ

    #59665

    Gary Jones
    Moderator
    Post count: 686

    At 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


    Changes in Genesis 2.1 – the ultimate guide to every single change in Genesis Framework 2.1 and 2.1.1 (all 88 of them!) | @GaryJ

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.