How to change header menu items hover color

AV16 · ‎Mär 14, 2023

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 😕
Thanks.

Anton · ‎Mär 15, 2023

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

Lösung in ursprünglichem Beitrag anzeigen

Anton · ‎Mär 14, 2023

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

AV16 · ‎Mär 14, 2023

Hey Anton,
I tried this one before but it's not working. 😞

Anton · ‎Mär 15, 2023

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

CMS Development