how to disable nav: hover for home page

Community Forums Forums Design Tips and Tricks how to disable nav: hover for home page

This topic is: resolved

This topic contains 10 replies, has 2 voices, and was last updated by  Jen Baumann 1 year, 8 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #7693

    venkats
    Participant
    Post count: 6

    by default the navigation bar for home page is showing :hover color (GREEN for ‘home’ as can be see at http://chipedge.com) . This is looking odd, as the default page is home. I want this buttom appear as normal color similar to other links on the menu.

    I couldn’t figure out Where to edit the style.css to disable this ? Or what is better solution for this.

    Thanks in advance

    #7697

    Jen Baumann
    Keymaster
    Post count: 325

    The css than controls this is:
    [css]#nav li a:hover,
    #nav li a:active,
    #nav .current_page_item a,
    #nav .current-cat a,
    #nav .current-menu-item a {
    background: #2CA243;
    color: #FFFFFF;
    }[/css]

    You could do something like:
    [css]
    .home #nav .current_page_item a,
    .home #nav .current-cat a,
    .home #nav .current-menu-item a {
    background: transparent !important;
    }[/css]


    If you need technical support for your theme please file a ticket.

    The forums are community based. Staff only monitors the forum for issues relating to the forum itself and to redirect users to where they need to go.

    #7700

    venkats
    Participant
    Post count: 6

    Thanks Jen.

    I tried your suggestion and found that green hover color is completely gone, not just the home button. And i liked the green color for hover. Transparent is giving other problems with the menu is visited.

    But i know where to edit now. Thanks again.

    #7705

    venkats
    Participant
    Post count: 6

    Hi Jen,

    Instead of

     background: transparent !important;

    i tried

     background: transparent important;

    Just removed the “!” before important and it is better, though i lost green hover all together by making transparent.

    Thanks again.

    #7707

    Jen Baumann
    Keymaster
    Post count: 325

    Remove the word, important, as well.


    If you need technical support for your theme please file a ticket.

    The forums are community based. Staff only monitors the forum for issues relating to the forum itself and to redirect users to where they need to go.

    #7708

    venkats
    Participant
    Post count: 6

    removed ‘important’ word as suggested, though couldn’t understand the diff. but that’s fine.

    Trying to get rid (or edit) of vertical black line between the menu items, but not able to narrow down to that code. will appreciate your help.

    #7709

    Jen Baumann
    Keymaster
    Post count: 325

    !important overrides everything. important without ! would be invalid css.

    That line is on this css:
    [css]#nav li a, #nav li.home a {
    background: url("images/nav-line.png") no-repeat scroll right center transparent;
    color: #FFFFFF;
    display: block;
    font-size: 13px;
    padding: 13px 22px 12px 20px;
    position: relative;
    text-decoration: none;
    }[/css]

    Oh, here’s some helpful info on pasting code here as well: http://www.studiopress.com/forums/faq/


    If you need technical support for your theme please file a ticket.

    The forums are community based. Staff only monitors the forum for issues relating to the forum itself and to redirect users to where they need to go.

    #7714

    venkats
    Participant
    Post count: 6

    Thanks for the info on the pasting the code.  it helps.

     

    some how i am not able to change this color of the vertical line. i have tried changing

    from

    [css]#nav li a,
    #nav li.home a {
    background: url(images/nav-line.png) ;
    }[/css]

    to
    [css]#nav li a, #nav li.home a {
    background: #fff;
    }[/css]

    But it didn’t help. looks i didn’t get it right.

     

    #7717

    Jen Baumann
    Keymaster
    Post count: 325

    nav-line.png is an image. You would need to change it to a new image. Or, you can change it to a border.

    [css]#nav li a, #nav li.home a {
    border: 1px solid #fff;
    color: #FFFFFF;
    display: block;
    font-size: 13px;
    padding: 13px 22px 12px 20px;
    position: relative;
    text-decoration: none;
    }[/css]


    If you need technical support for your theme please file a ticket.

    The forums are community based. Staff only monitors the forum for issues relating to the forum itself and to redirect users to where they need to go.

    #7723

    venkats
    Participant
    Post count: 6

    I got it now. Thank you for your kind help!

    #7726

    Jen Baumann
    Keymaster
    Post count: 325

    Welcome!


    If you need technical support for your theme please file a ticket.

    The forums are community based. Staff only monitors the forum for issues relating to the forum itself and to redirect users to where they need to go.

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

The topic ‘how to disable nav: hover for home page’ is closed to new replies.