Modern Portfolio Change Nav Tab Color

Community Forums Forums Design Tips and Tricks Modern Portfolio Change Nav Tab Color

This topic is: not resolved

This topic contains 4 replies, has 2 voices, and was last updated by  alison 1 year, 4 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #31121

    alison
    Participant
    Post count: 12

    I’ve looked online and in the forum, but still haven’t figured out how to change the tab color background and text to show the current location.

    Here’s my site: http://www.thesocialom.com

    I would like to the following options:

    Matching style of a hover to the green background and white text or
    Simply changing the text color

    Thanks!

    Alison

    #31144

    David Chu
    Participant
    Post count: 1351

    Hi, Some CSS changes needed to do that.
    Here’s the code that handles the hover:
    [css]
    .genesis-nav-menu li a:hover, .genesis-nav-menu li li a:hover {
    background-color: #A6D045;
    }[/css]

    I added a bit to have the current item have that same background. I coded this quickly by looking at your HTML, so it would need to be checked, but it should work. See how it addresses the current stuff:

    [css]
    .genesis-nav-menu li a:hover, .genesis-nav-menu li li a:hover, .genesis-nav-menu li.current-menu-item {
    background-color: #A6D045;
    }[/css]

    For changing the link color, you could add a color line to this. I stuck a color line there as an example – blue is probably not optimal, so you’d need to replace that. :-) I actually wouldn’t change the color myself.

    [css]
    .genesis-nav-menu a {
    display: block;
    padding: 1.5rem 1.25rem;
    position: relative;
    color: blue;
    }[/css]

    And adjust to taste. Hope that helps!
    Dave


    Dave Chu · Custom WordPress Developer – likes collaborating with Designers

    #31155

    alison
    Participant
    Post count: 12

    David,

    Yaaaay! You’re great! I appreciate your taking the time to  respond.

    Thanks so much – I was trying *everything* I could think of, looking at other code additions – none worked.

    And yours did. :)

    Alison

    #31288

    alison
    Participant
    Post count: 12

    Hi David,

    .genesis-nav-menu li.current-menu-item  {
    background-color: #a6d045;

    Worked perfectly for the current tab color, but I wanted to also change the font color of the current menu item to white.

    I tried doing same under font color section with the related li hover and li li hover code, but that didn’t work.  There may a conflicting code setting I would also need to change – or use a different snippet all together.

    Thanks.

    Alison

     

    #32133

    alison
    Participant
    Post count: 12

    In case this may help others, I found the other half of the solution via another forum.

    My theme was missing the following code to change nav bar tab and text to indicate current location:

    .genesis-nav-menu .current-menu-item a {
    color: #XXXXXX;
    background-color: #XXXXXX;
    }

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

You must be logged in to reply to this topic.