[System Administrator]

Hello,

I have a problem with the colors on the top navigation bar. On the home page, some of the buttons (which link to a location lower in the page) appear darker. This doesn’t happen on other pages. Any idea how I can fix this?

[Theme Horse Support Team]

Hi @system-administrator,

Could you please share us your Site URL so that we can check and provide you the appropriate Solutions.

Thanks

[System Administrator]

URL is dev.genovatech.com. If you look at the homepage, you will see that home, web, ect have a darker color than careers and contact us on the right. These darker links have jump links, but I am using the full url, that way I can get to the page and the jump if I am on a different web page withing my site.

Also, if you go to a different page, you will notice that all of the link buttons are the same color.

Thanks for your help.

[Theme Horse Support Team]

Yes we checked Your Site. The issue is happening because the menu item are linked to the same homepage like menu item ‘Home’. Those menu time are darker because they are active in homepage. Navigation Menu are designed in such a way that it will be active if you are on the same page. Like when you are on contact page then menu item contact will be active and if you are on News page then News menu item will be active.

For the solution please go to ‘Appearance > Customize > Additional CSS” and paste the below Custom CSS Code.

.main-navigation ul li.menu-item-type-custom.current_page_item > a[href*="http://dev.genovatech.com/#"],
.main-navigation ul li.menu-item-type-custom.current-menu-item > a[href*="http://dev.genovatech.com/#"] {
	background-color: transparent;
}
.main-navigation ul li.menu-item-type-custom a[href*="http://dev.genovatech.com/#"]:hover,
.main-navigation ul li.menu-item-type-custom a[href*="http://dev.genovatech.com/#"]:focus,
.main-navigation ul li.menu-item-type-custom:hover > a[href*="http://dev.genovatech.com/#"] {
	background-color: rgba(0, 0, 0, 0.15);
}

Thanks

[System Administrator]

This did not work. I have additional CSS customization as recommended by you in an earlier post. I placed this code before the other code and after… neither worked. The other customization you suggested is in this link…

[Theme Horse Support Team]

Sorry we have updated some tiny code on href links. Now please copy those above code again and follow the same instruction for the addition CSS. Yes if you have already customized Additional CSS that we provided from other Topic then you can add the above provided code at the end of those code.

Thanks and now hope it will work for you.

[Author]

Posts