Navigation Hover Color

Support Area Forums Foxy Navigation Hover Color

Viewing 5 posts - 1 through 5 (of 5 total)
URL to the page in question: http://http://www.collisionwithdestiny.com/
  • Author
    Posts
  • #22253
    Stephanie Miller
    Participant

    Only the sub-menu items are changing to the hover color selected? The parent menu items are not changing. I saw on some instructions you say Go to the theme options page and select they styling tab.
    Select “yes” at the top to include custom styling. I don’t see a place at the top of the page to select yes.

    #22255
    Bill Robbins
    Moderator

    Good Morning Stephanie,

    Great question. It looks like some of the styling in the Custom CSS is overriding the hover color for the currently selected menu item. In this style:

    
    div#sidebar nav a,
    div#sidebar nav a:visited,
    header#primary,
    #content,
    div#sidebar nav li.current-menuitem
    li a,
    .staff-list article,
    select.tinynav,
    #sidebar .widget {
    background-color: rgba(92,
    131, 181, 0.80);
    }
    

    The div#sidebar nav li.current-menuitem li a will override the earlier style for the current item’s hover state. What we can do is add this to the bottom of the Custom CSS to make sure the hover color picks up on the current item like it should:

    
    div#sidebar nav li.current-menuitem li a:hover {
         background-color: #7F00E3;
    } 
    

    Save your changes and see if that doesn’t do the trick. Let me know if you run into any questions or trouble.

    Have a great day,
    Bill

    #22268
    Stephanie Miller
    Participant

    Maybe I am misunderstanding it still did not work, now the submenu has gone from the purple to red. This is what I have in the custom css box. I wanted to change the transparent color from black to blue so I added the top code and that worked fine. On the style tab, does ‘buttons’ control the color of the buttons? I am assuming when you add custom code you clear the colors. Is that correct?

    div#sidebar nav a,
    div#sidebar nav a:visited,
    header#primary,
    #content,
    .staff-list article,
    select.tinynav,
    #sidebar .widget {
    background-color: rgba(92,
    131, 181, 0.80);
    }
    div#sidebar nav li.current-menuitem li a:hover {
    background-color: #8224E3;
    }

    #22269
    Stephanie Miller
    Participant

    I figure it out, I needed to add this line instead.

    div#sidebar nav a:hover {
    background-color: #971012;
    }

    #22270
    Bill Robbins
    Moderator

    Hey Stephanie,

    I’m glad it’s sorted out now. If you run into any other questions, just let me know.

    Thanks,
    Bill

Viewing 5 posts - 1 through 5 (of 5 total)
  • The topic ‘Navigation Hover Color’ is closed to new replies.