New default nav style and simplified color scheme

[awesomerobot (Kris)]

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.

[Arkshine]

I like it! It’s modern, less visually intrusive, and on top of that, it simplifies the CSS. Good job!

[nobrowser (Ian Zimmerman)]

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

[Firepup650 (Firepup Sixfifty)]

It doesn’t look different in size to me, could you maybe say which image it looks different?

[NateDhaliwal]

I think it’s this (taken on ask.replit.com):

It seems that the text is smaller.

[dsims]

@nobrowser

Font size looks smaller

@NateDhaliwal

It seems that the text is smaller.

Looks like the font size changed on this line here 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:

.nav-pills {
  > li {
    > a,
    button {
      font-size: var(--font-up-1);

[Moin]

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.

[awesomerobot (Kris)]

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

.navigation-container {
 font-size: var(--font-up-1);
}

Filters only:

#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!