Change hover background color for nav class buttons

[patrickemin]

Hi, found this discussion:

Button color changes

[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

[awesomerobot (Kris)]

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:

: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:

@awesomerobot

: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

[patrickemin]

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); 
}

[Vaping_Community]

You could try

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

[patrickemin]

@Vaping_Community

!important;

No, still no change, that’s weird.

[Vaping_Community]

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

[patrickemin]

Yes, my other CSS code is working:

[Vaping_Community]

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

[Vaping_Community]

It worked for me.. without !important

[patrickemin]

How did you did it?

[Vaping_Community]

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

[patrickemin]

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

[Vaping_Community]

This might be daft but are you clicking save?

[patrickemin]

Yeap I did

[patrickemin]

It’s not essential, let’s wait until someone else tries… @Steven if you can try that as you are admin on my site…

[Firepup650 (Firepup Sixfifty)]

Just to make sure, you have the theme component with the change applied to the theme you’re using, right?

[patrickemin]

Yes, and I have only one theme.

[Firepup650 (Firepup Sixfifty)]

If you try a cache refresh (Ctrl/Cmd+Shift+R), does that by chance make it show up?

[patrickemin]

No change.

[patrickemin]

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 site with interferes with that mod.

I deactivated all components one by one to no avail.