How to change header menu items hover color

Develop, Build & Integrate CMS Development
1

Hey Guys,
I want to change my site header banner menu hover colors. Could you please help me to fix this issue?
Here’s my site URL. https://corehesion.com.au/
I try to add CSS as well. But unfortunately my style CSS I cant edit.
Waiting for you guys help :confused:
Thanks.

2

Hi @AV16,

since you’re using growth theme you can set the menu hover color here:

Hub Settings(cog icon top right) → Tools → Website → Themes → Growth → More settings → Website Header → Menu → Hover

best,

Anton

3

Hey Anton,
I tried this one before but it’s not working. :disappointed_face:

AV16_0-1678804005084.png
AV16_0-1678804005084.png473×803 37.8 KB

4

Hi @AV16,

did you (or somebody) changed something in the theme-overrides.css or layout.html of your theme?

Just asking because there are some things happening in the source-code that are not default.

1. The default theme CSS contains following lines:

.header__menu-item--depth-1 > .header__menu-link:hover,
.header__menu-item--depth-1 > .header__menu-link:focus {
 {{ header_menu_hover_font.style }};
 color: {{ header_menu_hover_font.color }};
}

.header__menu-item--depth-1 > .header__menu-link:active {
 {{ header_menu_hover_font.style }};
 color: {{ color_variant(header_menu_hover_font.color, 80) }};
}

they’re located in the lines 955-964. Could you please check if they’re in your growth/theme too?

2. Something I’ve noticed while inspecting the source code a bit further is: The theme-override.css is getting loaded partially directly into the <head>-tag as a <style>-tag. Please check the layout.html (theme/templates/layout) of your theme. There should be following line

{{ require_css(get_asset_url("../../css/theme-overrides.css")) }}

somewhere after

{{ require_css(get_asset_url("../../css/main.css")) }}

included

best,

Anton