# Change hover background color for nav class buttons
**URL:** https://meta.discourse.org/t/change-hover-background-color-for-nav-class-buttons/320801
**Category:** Development
**Created:** [August 8, 2024, 9:20pm UTC](https://meta.discourse.org/t/change-hover-background-color-for-nav-class-buttons/320801 "2024-08-08T21:20:14Z")
**Posts on this page:** 20
**Page:** 1
### Author:  [@patrickemin](https://meta.discourse.org/u/patrickemin)
#### Post date: [August 8, 2024, 9:20pm UTC](https://meta.discourse.org/t/change-hover-background-color-for-nav-class-buttons/320801/1 "2024-08-08T21:20:14Z")
Hi, found this discussion:
> [@Button color changes](https://meta.discourse.org/t/button-color-changes/91007):
>
> Hello all, how do you change the orange default button color? I’ve changed it to the desired hex color in Settings\>Customize\>Colors but the buttons remain the default orange.
I tried to adapt to my case which is how to **change the background color for nav buttons** when hovering them (not when they are active). My poor CSS knowledge did not suffice… Help appreciated 😉
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [August 8, 2024, 9:31pm UTC](https://meta.discourse.org/t/change-hover-background-color-for-nav-class-buttons/320801/2 "2024-08-08T21:31:16Z")
That topic is outdated, so I’m going to archive it…
If you’d like to change the hover color for these filter buttons above the topic list:
You can do this, since we use some variables:
```css
:root {
--d-nav-bg-color--hover: #fab1ed;
}
```
There are a whole set of variables for this nav that can be edited in the same way:
> [@New default nav style and simplified color scheme](https://meta.discourse.org/t/new-default-nav-style-and-simplified-color-scheme/312597/1):
>
> ```plaintext
> :root {
> --d-nav-color: var(--primary);
> --d-nav-bg-color: transparent;
> --d-nav-color--hover: var(--primary);
> --d-nav-bg-color--hover: var(--d-hover);
> --d-nav-color--active: var(--tertiary);
> --d-nav-bg-color--active: transparent;
> --d-nav-border-color--active: var(--d-nav-color--active);
> --d-nav-underline-height: 0.125em;
> }
>
> ```
For general reference: [Making custom CSS changes on your site](https://meta.discourse.org/t/make-css-changes-on-your-site/168101)
---
### Author:  [@patrickemin](https://meta.discourse.org/u/patrickemin)
#### Post date: [August 8, 2024, 9:33pm UTC](https://meta.discourse.org/t/change-hover-background-color-for-nav-class-buttons/320801/3 "2024-08-08T21:33:14Z")
Thanks a lot @awesomerobot ! But I added that to my custom CCS, no change is visible. I tried a “fixed” color as well, same, no effect.
```plaintext
:root {
--d-nav-bg-color--hover: var(--quaternary);
}
```
---
### Author:  [@Vaping\_Community](https://meta.discourse.org/u/Vaping_Community)
#### Post date: [August 8, 2024, 10:05pm UTC](https://meta.discourse.org/t/change-hover-background-color-for-nav-class-buttons/320801/4 "2024-08-08T22:05:33Z")
You could try
```plaintext
:root {
--d-nav-bg-color--hover: var(--quaternary) !important;
}
```
---
### Author:  [@patrickemin](https://meta.discourse.org/u/patrickemin)
#### Post date: [August 8, 2024, 10:06pm UTC](https://meta.discourse.org/t/change-hover-background-color-for-nav-class-buttons/320801/5 "2024-08-08T22:06:51Z")
> [@Vaping\_Community](#):
>
> ` !important;`
No, still no change, that’s weird.
---
### Author:  [@Vaping\_Community](https://meta.discourse.org/u/Vaping_Community)
#### Post date: [August 8, 2024, 10:10pm UTC](https://meta.discourse.org/t/change-hover-background-color-for-nav-class-buttons/320801/6 "2024-08-08T22:10:05Z")
Have you created a theme component to add the CSS to?
---
### Author:  [@patrickemin](https://meta.discourse.org/u/patrickemin)
#### Post date: [August 8, 2024, 10:11pm UTC](https://meta.discourse.org/t/change-hover-background-color-for-nav-class-buttons/320801/7 "2024-08-08T22:11:52Z")
Yes, my other CSS code is working:
---
### Author:  [@Vaping\_Community](https://meta.discourse.org/u/Vaping_Community)
#### Post date: [August 8, 2024, 10:15pm UTC](https://meta.discourse.org/t/change-hover-background-color-for-nav-class-buttons/320801/8 "2024-08-08T22:15:44Z")
I’ve never used :root I’ve always used the class names, I’ll have to take a look into it now 👀
---
### Author:  [@Vaping\_Community](https://meta.discourse.org/u/Vaping_Community)
#### Post date: [August 8, 2024, 10:20pm UTC](https://meta.discourse.org/t/change-hover-background-color-for-nav-class-buttons/320801/9 "2024-08-08T22:20:06Z")
It worked for me.. without !important
---
### Author:  [@patrickemin](https://meta.discourse.org/u/patrickemin)
#### Post date: [August 8, 2024, 10:21pm UTC](https://meta.discourse.org/t/change-hover-background-color-for-nav-class-buttons/320801/10 "2024-08-08T22:21:43Z")
How did you did it? 😁
---
### Author:  [@Vaping\_Community](https://meta.discourse.org/u/Vaping_Community)
#### Post date: [August 8, 2024, 10:23pm UTC](https://meta.discourse.org/t/change-hover-background-color-for-nav-class-buttons/320801/11 "2024-08-08T22:23:42Z")
Same as you.. it didn’t change anything on the top of latest though, it changed admin menu items and user preference menu items
---
### Author:  [@patrickemin](https://meta.discourse.org/u/patrickemin)
#### Post date: [August 8, 2024, 10:26pm UTC](https://meta.discourse.org/t/change-hover-background-color-for-nav-class-buttons/320801/12 "2024-08-08T22:26:23Z")
Ok in my case no change visible on any of those. 😕
---
### Author:  [@Vaping\_Community](https://meta.discourse.org/u/Vaping_Community)
#### Post date: [August 8, 2024, 10:27pm UTC](https://meta.discourse.org/t/change-hover-background-color-for-nav-class-buttons/320801/13 "2024-08-08T22:27:56Z")
This might be daft but are you clicking save?
---
### Author:  [@patrickemin](https://meta.discourse.org/u/patrickemin)
#### Post date: [August 8, 2024, 10:28pm UTC](https://meta.discourse.org/t/change-hover-background-color-for-nav-class-buttons/320801/14 "2024-08-08T22:28:34Z")
Yeap I did
---
### Author:  [@patrickemin](https://meta.discourse.org/u/patrickemin)
#### Post date: [August 8, 2024, 10:29pm UTC](https://meta.discourse.org/t/change-hover-background-color-for-nav-class-buttons/320801/15 "2024-08-08T22:29:22Z")
It’s not essential, let’s wait until someone else tries… @Steven if you can try that as you are admin on my site…
---
### Author:  [@Firepup650](https://meta.discourse.org/u/Firepup650)
#### Post date: [August 8, 2024, 11:33pm UTC](https://meta.discourse.org/t/change-hover-background-color-for-nav-class-buttons/320801/16 "2024-08-08T23:33:45Z")
Just to make sure, you have the theme component with the change applied to the theme you’re using, right?
---
### Author:  [@patrickemin](https://meta.discourse.org/u/patrickemin)
#### Post date: [August 8, 2024, 11:35pm UTC](https://meta.discourse.org/t/change-hover-background-color-for-nav-class-buttons/320801/17 "2024-08-08T23:35:49Z")
Yes, and I have only one theme.
---
### Author:  [@Firepup650](https://meta.discourse.org/u/Firepup650)
#### Post date: [August 8, 2024, 11:38pm UTC](https://meta.discourse.org/t/change-hover-background-color-for-nav-class-buttons/320801/18 "2024-08-08T23:38:05Z")
If you try a cache refresh (Ctrl/Cmd+Shift+R), does that by chance make it show up?
---
### Author:  [@patrickemin](https://meta.discourse.org/u/patrickemin)
#### Post date: [August 8, 2024, 11:39pm UTC](https://meta.discourse.org/t/change-hover-background-color-for-nav-class-buttons/320801/19 "2024-08-08T23:39:25Z")
No change.
---
### Author:  [@patrickemin](https://meta.discourse.org/u/patrickemin)
#### Post date: [August 9, 2024, 12:07am UTC](https://meta.discourse.org/t/change-hover-background-color-for-nav-class-buttons/320801/20 "2024-08-09T00:07:07Z")
Ok, so, as I have two other Discourse sites, I tested that on another one, and it… worked !
Now there is something on my [dessein-tech.com](http://dessein-tech.com) site with interferes with that mod.
I deactivated all components one by one to no avail. 😕
[Next page](https://meta.discourse.org/t/change-hover-background-color-for-nav-class-buttons/320801.md?page=2)