Archived topic
Can´t set navigation menu items color on page with page hero
7 replies · Started by Oliver on September 27, 2021
I´m trying to change the color of the navigation menu items while using a header element to add a page hero in the front page, but somehow it is not working. I added a different page hero for the blog posts, where I use the featured image of blog posts as the hero background and there it works.
Hi there,
what colors have you set in the Home Page header elements navigation/site header colors ?
Hi Dave!
It´s supposed to be white (now it is some sort of gray) and green (#1abc9c) on hover, just like the navigation that shows inside posts.
What are the Display Rules that you have on the 2 different header elements ?
Both are just two header elements. One displays in the front page and the other one in posts/all posts.
Hi Oliver,
It´s supposed to be white (now it is some sort of gray) and green (#1abc9c) on hover
Your front page is using HTML anchor, all the menu items are actually defined as the current menu item when you are on the front page. So all the menu items are using the color set forcurrent menu item, it overrides the hover color and normal color you set.
You can try this CSS to add a hover color to the menu items on front page:
.home .header-wrap #site-navigation:not(.toggled) .main-nav > ul > li[class*="current-menu-"]:hover > a {
color: #1abc9c;
}Hi Ying
Perfect! thanks for the help.
Have a nice day!
You are welcome :)
You too!
