What’s changing
Soon our “top menu” and similarly styled navigation (sometimes referred to as nav pills) will have an updated and more consistent style throughout Discourse.
Top Menu
Before:
After:
Profile Menu
Before:
After:
Why is it changing?
This allows us to simplify our default CSS and remove the use of the “quaternary” color in the default Discourse theme. This color has been used by many themes over the years, so it will still be available for use in custom CSS.
The use of this color, which is very similar to “danger red” by default, made it difficult to do things like highlight an active filter… because in this state it looks like an error:
Before:
After:
How do I change this in themes?
Along with this update, we’ve also made it easier to change these nav colors in themes using CSS custom properties. We have some new variables:
: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;
}
So rather than adding multiple sets of custom CSS to change each nav instance, you can change variables as needed. For example:
:root {
--d-nav-color--active: mediumorchid;
}
Applying this CSS would result in:
Where is this underline coming from?
You may notice that the “underline” of the active nav item doesn’t make use of the border-bottom
CSS property. Instead it’s applied using an ::after
pseudo element.
Existing themes may already make use of the border
property, so this method will hopefully make it easier to remove our underline if it clashes with existing styles. To remove:
:root {
--d-nav-underline-height: 0;
}
What if I preferred the old style?
Using the new CSS variables makes this fairly easy to get back to. In your theme you can apply:
:root {
--d-nav-color--hover: var(--quaternary);
--d-nav-bg-color--hover: var(--quaternary-low);
--d-nav-color--active: var(--secondary);
--d-nav-bg-color--active: var(--quaternary);
--d-nav-border-color--active: var(--primary-medium);
--d-nav-underline-height: 0;
}
If you only want to change one instance of this nav, you can scope the variable changes to an ID or class, for example #navigation-bar
instead of :root
:
#navigation-bar {
--d-nav-color--hover: var(--quaternary);
--d-nav-bg-color--hover: var(--quaternary-low);
--d-nav-color--active: var(--secondary);
--d-nav-bg-color--active: var(--quaternary);
--d-nav-underline-height: 0;
}
another example:
.user-navigation {
--d-nav-bg-color--active: lightcyan;
}
Not sure how to change CSS? check out Make CSS changes on Your Site
That’s all for now! As always, let us know if you have any questions or encounter any issues along the way.