# New default nav style and simplified color scheme
**URL:** https://meta.discourse.org/t/new-default-nav-style-and-simplified-color-scheme/312597
**Category:** Announcements
**Created:** [June 24, 2024, 1:45pm UTC](https://meta.discourse.org/t/new-default-nav-style-and-simplified-color-scheme/312597 "2024-06-24T13:45:47Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [June 24, 2024, 1:45pm UTC](https://meta.discourse.org/t/new-default-nav-style-and-simplified-color-scheme/312597/1 "2024-06-24T13:45:47Z")
# 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:
```css
: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:
```css
: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](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements#what_is_a_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:
```css
: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:
```css
: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`:
```css
#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:
```css
.user-navigation {
--d-nav-bg-color--active: lightcyan;
}
```
Not sure how to change CSS? check out [Making custom CSS changes on your site](https://meta.discourse.org/t/make-css-changes-on-your-site/168101)
That’s all for now! As always, let us know if you have any questions or encounter any issues along the way. 🚀
---
### Author:  [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [June 24, 2024, 4:20pm UTC](https://meta.discourse.org/t/new-default-nav-style-and-simplified-color-scheme/312597/2 "2024-06-24T16:20:59Z")
I like it! It’s modern, less visually intrusive, and on top of that, it simplifies the CSS. Good job! :chefs_kiss:
---
### Author:  [@nobrowser](https://meta.discourse.org/u/nobrowser)
#### Post date: [June 25, 2024, 12:16am UTC](https://meta.discourse.org/t/new-default-nav-style-and-simplified-color-scheme/312597/3 "2024-06-25T00:16:19Z")
In your examples, color is not the only difference between “old” and “new”. Font size looks smaller in the “new” examples. Is that intended or accidental?
I feel there has been way too much churn with the default font size already ☹
---
### Author:  [@Firepup650](https://meta.discourse.org/u/Firepup650)
#### Post date: [June 25, 2024, 12:44am UTC](https://meta.discourse.org/t/new-default-nav-style-and-simplified-color-scheme/312597/4 "2024-06-25T00:44:31Z")
It doesn’t look different in size to me, could you maybe say which image it looks different?
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [June 25, 2024, 11:40am UTC](https://meta.discourse.org/t/new-default-nav-style-and-simplified-color-scheme/312597/5 "2024-06-25T11:40:13Z")
I think it’s this (taken on [ask.replit.com](http://ask.replit.com)):
It seems that the text is smaller.
---
### Author:  [@dsims](https://meta.discourse.org/u/dsims)
#### Post date: [June 25, 2024, 12:41pm UTC](https://meta.discourse.org/t/new-default-nav-style-and-simplified-color-scheme/312597/6 "2024-06-25T12:41:36Z")
> [@nobrowser](#):
>
> Font size looks smaller
> [@NateDhaliwal](#):
>
> It seems that the text is smaller.
Looks like the font size changed [on this line here](https://github.com/discourse/discourse/pull/27502/files#diff-6cbba300b6ff5d7d73249c717a53da2e58c6d7be9d973e214d2799caa3448d33L37) when `--font-up-1` font-size was removed and so now it defaults to the `--base-font-size`. And in the case of the mobile dropdown nav, `--font-down-1` is still applied but without the `--font-up-1`.
previous style:
```plaintext
.nav-pills {
> li {
> a,
button {
font-size: var(--font-up-1);
```
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [June 25, 2024, 1:02pm UTC](https://meta.discourse.org/t/new-default-nav-style-and-simplified-color-scheme/312597/7 "2024-06-25T13:02:39Z")
I noticed that too. The font of the category and tag dropdowns is larger than “Latest” next to it. And “Latest” is even smaller than the excerpt of the pinned topic when you don’t hide the sidebar.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [June 25, 2024, 2:24pm UTC](https://meta.discourse.org/t/new-default-nav-style-and-simplified-color-scheme/312597/8 "2024-06-25T14:24:48Z")
Yes, the font-size adjustment was intentional (there were some slight spacing adjustments too). When we increased the overall font-size the filters became larger along with everything else — but now the dropdowns, filters, and new topic button text are all the same size.
If you’d like the text to be larger again, you can add some CSS…
Everything in the nav (dropdowns, filters, buttons):
```css
.navigation-container {
font-size: var(--font-up-1);
}
```
Filters only:
```css
#navigation-bar {
font-size: var(--font-up-1);
}
```
> [@nobrowser](#):
>
> I feel there has been way too much churn with the default font size already ☹
If you have any specific issues or suggestions, let us know and we can help!