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, 7 months ago.

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


    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:

    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




    David Chu

    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 Chu · Custom WordPress Developer – likes collaborating with Designers




    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. :)




    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.






    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.