arrow rest color nav hover color

Hey there! If you’d like to change the active state color, you’ll need a few classes. Here’s a snippet from expound.css that controls that:

.navigation-main ul > .current_page_item,
.navigation-main ul > .current-menu-item,
.navigation-main ul > .current-post-ancestor,
.navigation-main ul > .current-menu-ancestor,
.navigation-main ul > .current-menu-parent,
.navigation-main ul > .current-post-parent {
  background: #117bb8;
}

Similarly, the border-top color controls the arrow color:

.navigation-main ul > .current_page_item:hover a:after,
.navigation-main ul > .current-menu-item:hover a:after,
.navigation-main ul > .current-post-ancestor:hover a:after,
.navigation-main ul > .current-menu-ancestor:hover a:after,
.navigation-main ul > .current-menu-parent:hover a:after,
.navigation-main ul > .current-post-parent:hover a:after {
  border-top-color: #138bcf;
}

So you’ll need to target and change those values in your child theme or a Custom CSS plugin. Hope that helps!

It’s not working for me yet … This is what I have so far:

.navigation-main {
background-color: #5040FF;
}

.navigation-main ul > .current_page_item,
.navigation-main ul > .current-menu-item,
.navigation-main ul > .current-post-ancestor,
.navigation-main ul > .current-menu-ancestor,
.navigation-main ul > .current-menu-parent,
.navigation-main ul > .current-post-parent {
background: #1500FF;
}

.navigation-main ul > .current_page_item:hover,
.navigation-main ul > .current-menu-item:hover,
.navigation-main ul > .current-post-ancestor:hover,
.navigation-main ul > .current-menu-ancestor:hover,
.navigation-main ul > .current-menu-parent:hover,
.navigation-main ul > .current-post-parent:hover {
background: #9609BD;
}

.navigation-main ul > .current_page_item:hover a:after,
.navigation-main ul > .current-menu-item:hover a:after,
.navigation-main ul > .current-post-ancestor:hover a:after,
.navigation-main ul > .current-menu-ancestor:hover a:after,
.navigation-main ul > .current-menu-parent:hover a:after,
.navigation-main ul > .current-post-parent:hover a:after {
border-top-color: #9609BD;
}

.navigation-main li.current_page_item a, .navigation-main li.current-menu-item a {
background: #9609BD;
}

ul#menu-topnav li {
background: #1500FF;
}

=======

What I’m seeing is …
non-tabbed navbar is 5040FF (good)
current_state is 9609BD (good)
background color of “at rest” tabs is 1500FF (good)
tab “hover” color is 1500FF (would like something different, say, green for now)
arrow color “at rest” is 117BB8 (should be same color as current_state, 9609BD)
arrow color “hover” is 9609BD (should be same color as hover color, 1500FF)

Sorry if this is confusing … I never understood the navigation classes.

If you could help me with this, I would appreciate it even more than I already do!

Laura S.

You got it all figured out, just read through it again and change the values accordingly. :hover is hover, :hover a:after is the little arrow, .current-page-item (and other classes) are the active menu items. Firebug or Chrome’s Developer Tools will help you out.

Good luck!

Hello Laura,

Have you successfully changed the color of the little down arrow under the navigation bar? I’m also trying to change it, from blue to red. I’ve changed the “#117bb8” in the codes to “#800000”, but it’s not working. Any help would be appreciated.

The website that I’m working on:
https://kamayojewelry.com/sample-page/

@diyomarpandan: It is impolite to interrupt another poster’s ongoing thread with a question of your own. It causes significant problems for the forum’s volunteers and prevents us from being able to track issues by topic. Please post your own topic.

Hi Konstantin,

What you say makes sense, but there are actually *two* little arrow states — one when the arrow is at rest, i.e., when that particular page is active, and the other, when the arrow accompanies the tab that is being “hovered” over.

I tried messing with the values, but I ended up with a colored arrow inside a differently-colored small rectangle (similar dimensions to the arrow).

Sorry to be such a pain. I would love to understand this better.

Laura

I edited mine using this CSS code:

.navigation-main ul > .current_page_item:hover a:after,
.navigation-main ul > .current-menu-item:hover a:after,
.navigation-main ul > .current-post-ancestor:hover a:after,
.navigation-main ul > .current-menu-ancestor:hover a:after,
.navigation-main ul > .current-menu-parent:hover a:after,
.navigation-main ul > .current-post-parent:hover a:after {
border-color: #800000;
}

.navigation-main ul > .current_page_item a:after,
.navigation-main ul > .current-menu-item a:after,
.navigation-main ul > .current-post-ancestor a:after,
.navigation-main ul > .current-menu-parent a:after,
.navigation-main ul > .current-post-parent a:after {
border-color: #800000 #fff #fff;
}

The last 3 colors make the inverted triangle within a rectangle.

Yes! That worked, thanks. But I still can’t get the color of a tab/item to change when I hover over it. I’ve got the hover color all set, but it’s not working. Maybe I need to validate my CSS at this point … stay tuned …

Ok, CSS validator found one small (unrelated) error. Can anyone help me with this? Here is my current CSS:

h1.site-title {
font-size: 50pt;
}

.navigation-main {
background-color: #5040FF;
}

.navigation-main a {
font-size: 15px;
padding: 14px;
}

.navigation-main li.current_page_item a, .navigation-main li.current-menu-item a {
background-color: #9609BD;
}

.navigation-main li.current_page_item a:after, .navigation-main li.current-menu-item a:after {
background-color: #9609BD #fff #fff;
}

ul#menu-topnav li {
background-color: #1500FF;
}

.navigation-main ul > .current_page_item,
.navigation-main ul > .current-menu-item,
.navigation-main ul > .current-post-ancestor,
.navigation-main ul > .current-menu-ancestor,
.navigation-main ul > .current-menu-parent,
.navigation-main ul > .current-post-parent {
background-color: #1500FF;
}

.navigation-main ul > .current_page_item:hover,
.navigation-main ul > .current-menu-item:hover,
.navigation-main ul > .current-post-ancestor:hover,
.navigation-main ul > .current-menu-ancestor:hover,
.navigation-main ul > .current-menu-parent:hover,
.navigation-main ul > .current-post-parent:hover {
background-color: #9609BD;
}

.navigation-main ul > .current_page_item:after,
.navigation-main ul > .current-menu-item:after,
.navigation-main ul > .current-post-ancestor:after,
.navigation-main ul > .current-menu-ancestor:after,
.navigation-main ul > .current-menu-parent:after,
.navigation-main ul > .current-post-parent:after {
background-color: #9609BD;
}

.navigation-main ul > .current_page_item:hover a:after,
.navigation-main ul > .current-menu-item:hover a:after,
.navigation-main ul > .current-post-ancestor:hover a:after,
.navigation-main ul > .current-menu-ancestor:hover a:after,
.navigation-main ul > .current-menu-parent:hover a:after,
.navigation-main ul > .current-post-parent:hover a:after {
border-top-color: #9609BD #fff #fff;
}

.navigation-main ul > .current_page_item a:after,
.navigation-main ul > .current-menu-item a:after,
.navigation-main ul > .current-post-ancestor a:after,
.navigation-main ul > .current-menu-parent a:after,
.navigation-main ul > .current-post-parent a:after {
content: ”;
font-size: 0px;
line-height: 0%;
width: 0px;
border-top: 6px solid #9609BD;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
position: absolute;
bottom: -6px;
left: 50%;
margin-left: -6px;
z-index: 9995;
}

.site-content .entry-content, .site-content .entry-header, .site-content .entry-summary {
margin: 1.5em 10em 1.5em 4em;
}

p {
font-size: 15px;
line-height: 24px;
font-family: Merienda;
}

.button-primary, a.button-primary, .wpm-button-primary, a.wpm-button-primary {
display: none;
}

.featured-content-secondary .entry-title a {
color: #3a3a3a;
font-size: 16px;
}

.featured-content-secondary .entry-title {
margin-top: -14px;
text-align: center;
}

.site-content .entry-title {
font-size: 20px;
line-height: 28px;
font-family: Merienda;
}

.site-header .site-branding {
position: relative;
background-color: #ffffa2;
}

.expound-full-width #primary {
/* width: 960px; */
background-color: #ffffa2;
}

.site-main {
float: left;
width: 100%;
clear: both;
background-color: #ffffa2;
}

.entry-title a {
color: #117bb8;
font-family: Merienda;
}

Thanks,
Laura

Yay! I figured out the main question. This is what it needed:

ul#menu-topnav li:hover {
background-color: #b11fd9;
}

I’m still trying to figure out how to change the little arrow color when you mouse over the tab that it’s associated with … right now the arrow has a “resting state” color, but that color changes to something else when you mouse over the tab (so it is a different color than the tab). I would like the color to stay the same in the mouseover state.

Great theme though and *great support*!! (sadly, not that common)

Laura

Thanks! How about this:

.navigation-main ul > .current_page_item:hover a:after,
.navigation-main ul > .current-menu-item:hover a:after,
.navigation-main ul > .current-post-ancestor:hover a:after,
.navigation-main ul > .current-menu-ancestor:hover a:after,
.navigation-main ul > .current-menu-parent:hover a:after,
.navigation-main ul > .current-post-parent:hover a:after {
  border-top-color: red;
}

That should give you a red triangle on hover over an active state.