Hi, found this discussion: [image] Button color changes Development [34%20PM][01%20PM]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 :wink:

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: [image] You can do this, since we use some variables: :root { --d-nav-bg-color--hover: #fab1ed; } [image] There are a whole set of variables for this nav that can be edited in the same way: [image]New default nav style and simplified color scheme :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

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. :root { --d-nav-bg-color--hover: var(--quaternary); }

[image] Vaping_Community: !important; No, still no change, that’s weird.

Have you created a theme component to add the CSS to?

Yes, my other CSS code is working: [image]

I’ve never used :root I’ve always used the class names, I’ll have to take a look into it now :eyes:

It worked for me.. without !important [IMG_0675]

Same as you.. it didn’t change anything on the top of latest though, it changed admin menu items and user preference menu items

Ok in my case no change visible on any of those. :confused:

Change hover background color for nav class buttons

Development

Vaping_Community August 8, 2024, 10:05pm 4

You could try


:root {
  --d-nav-bg-color--hover: var(--quaternary) !important; 
}

Topic		Replies	Views
How to change the buttons' colors on hover? Product Support versatile-banner	2	492	June 30, 2023
Header icons color on mouse hovering issue Product Support	2	941	February 3, 2022
New default nav style and simplified color scheme Announcements	7	689	June 25, 2024
Customize the New Topic button Developers how-to	11	2555	June 10, 2025
Nav Button Highlighter component - now working Theme component	8	407	November 20, 2025

Change hover background color for nav class buttons

Related topics