New default nav style and simplified color scheme

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

After:
image

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:

image

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

image

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

image

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

image

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

27 Likes

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

9 Likes

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

2 Likes

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

1 Like

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


It seems that the text is smaller.

2 Likes

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);
1 Like

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.

1 Like

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

If you have any specific issues or suggestions, let us know and we can help!

3 Likes