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 2 years ago.

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

    alison
    Participant

    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

    Hi, Some CSS changes needed to do that.
    Here’s the code that handles the hover:

    .genesis-nav-menu li a:hover, .genesis-nav-menu li li a:hover {
      background-color: #A6D045;
    }

    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:

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

    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.

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

    And adjust to taste. Hope that helps!
    Dave


    Dave Chu · Custom WordPress Developer – likes collaborating with Designers

    #31155

    alison
    Participant

    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

    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

    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.