# How to change header menu items hover color

**URL:** <https://community.hubspot.com/t/how-to-change-header-menu-items-hover-color/77136>\
**Category:** CMS Development\
**Tags:** css\
**Created:** [March 14, 2023, 1:34pm UTC](https://community.hubspot.com/t/how-to-change-header-menu-items-hover-color/77136 "2023-03-14T13:34:37Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![AV16](https://avatars.discourse-cdn.com/v4/letter/a/e47c2d/32.png) [@AV16](https://community.hubspot.com/u/AV16)\
**Post date:** [March 14, 2023, 1:34pm UTC](https://community.hubspot.com/t/how-to-change-header-menu-items-hover-color/77136/1 "2023-03-14T13:34:37Z")

</div>

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/](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.

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [March 14, 2023, 2:04pm UTC](https://community.hubspot.com/t/how-to-change-header-menu-items-hover-color/77136/2 "2023-03-14T14:04:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![AV16](https://avatars.discourse-cdn.com/v4/letter/a/e47c2d/32.png) [@AV16](https://community.hubspot.com/u/AV16)\
**Post date:** [March 14, 2023, 2:26pm UTC](https://community.hubspot.com/t/how-to-change-header-menu-items-hover-color/77136/3 "2023-03-14T14:26:54Z")

</div>

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

 ![AV16_0-1678804005084.png](https://d2qpr2jzcazej7.cloudfront.net/original/3X/d/0/d08d65e395d848e8fe0dc3b9fc55256178bc3668.png)

---

<div class="post-metadata">

**Author:** ![Anton](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/anton/32/103167_2.png) [@Anton](https://community.hubspot.com/u/Anton)\
**Post date:** [March 15, 2023, 8:59am UTC](https://community.hubspot.com/t/how-to-change-header-menu-items-hover-color/77136/4 "2023-03-15T08:59:53Z")

</div>

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:

```lia-code-sample
.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