Modern Portfolio Change Nav Tab Color

[alison]

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

[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

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[alison]

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

[alison]

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

 

[alison]

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;
}

[Author]

Posts