Proposal: Differentiate navbar bg color from header color

Hey everyone, I’d like to propose a change to the background color of the menus beneath the main header. This comes as a result of XWIKI-15629

Current Issue:
The menu shares the same color as the header, which creates a visually confusing style as the visual hierarchy is difficult to be perceived (both elements have the same visual weight), as shown below:

current

Additional issues:

  • The menu has an inner shadow that isn’t used anywhere else in the interface, making it stand out unnecessarily.
  • Without editing CSS directly, it is impossible to customize the navigation background and header background separately.

Proposed Solution:
I suggest creating a new color variable called @header-default-bg, which would be applied only to the header. The existing @navbar-default-bg would then be used exclusively for the menu. By default, this menu color could be 10% less saturated and bright compared to the header color, maintaining a subtle differentiation. @header-default-bg should also be exposed on the admin interface for easy customization (Global Admin > Look and Feel > Themes > Iceberg > Customize > Navigation bar).

Another change would be to reduce the height of the navbar. Currently, it’s the same height as the header, but as a secondary element, it doesn’t need to be that tall. Shortening it slightly would improve visual hierarchy.

Together, these changes would look like this:

proposal

What do you think of it?

Thanks all

3 Likes

Looks great, I think it’s a good idea to have both these changes. Thank you for the proposal, Thiago!!

1 Like

Hi @tkrieck ,

As a user of XWiki, I am really interesting in this feature as it would avoid a lot of CSS customization for menu (below the navbar-header), used through the Menu Application.

But in the Navigation bar section of the administration section, there are alll these variables: @navbar-default-color, @navbar-default-bg, @navbar-default-link-color, @navbar-default-link-hover-color, @navbar-default-link-hover-bg, @navbar-default-link-active-color, @navbar-default-link-active-bg, @navbar-height.
Should all variables be available also for the menu ?

Best Regards,
Luc

Hi @LucD, good point. Yes, for the sake of consistency, I think that these variables should be available as well. In practice, we should have all of them in @navbar- and @header- prefixes.

1 Like

I had to hard code this height last year when changing the structure of the menu while keeping the display consistent → XWIKI-19725: Menu are not accessible using a screen reader by Sereza7 · Pull Request #2078 · xwiki/xwiki-platform · GitHub
Before that, it relied on @navbar-padding-vertical to get its height
:+1: to reduce the default height of the navbar.

So if I understand well, we should probably add a new section to the colorTheme admin UI.
Side note: This UI is getting larger and larger with time. Maybe it could be interesting to give further details on what’s the main element for each section (it could get confusing for someone not very knowledgeable to differentiate between dropdown, navbar and header for example).

:+1: For the idea of using color to differentiate those elements. Note that even on xwiki.org we do use a stylesheet extension to have both of these colors different, so there’s definitely a use case for this :slight_smile:

I assume this default you’re talking about is using the Iceberg colorTheme. Note that we cannot extend the rule you described to all colorThemes. Here is an example with Charcoal, where the color is pretty much black and we cannot reduce saturation and brightness.


For other color themes, what should be our strategy? I can see two solutions:

  • Be lazy, keep them as they are now, but admins have access to the UI if they want to update them.
  • Update every single one to have slight variations in colors

Thanks for handling this proposal!
Lucas C.

1 Like

Yes, I think this will be necessary.

I agree, and the naming for the variables also does not help. For less technically inclined users it can be scary to mess with “@navbar-default-link-hover-color” but not so much with “Link hover color” inside a section named “Navigation Bar” (this also would need to be translated as well).

On a side note, we seem to have a bug in the color picker. It didn’t open for me sometimes, but I could not find the pattern in the error, sometimes it worked, sometimes it didn’t.

Indeed, we can have two rules based on the general lightness of the color theme, if it is a dark one we can ADD 10% brightness to the navbar and get something like this:

Screenshot 2024-11-04 at 13.58.01

I would update every color theme, but following the same rule. It shouldn’t be too difficult if the main rule is simple enough.

  • Light themes: reduce saturation and brightness by 10%
  • Dark theme: add brightness by 10% (maybe we can do with less, like 5%)

In HSL color model, it is easy to find the corresponding hex values and I can add them to the final proposal for each Theme. What do you think?

I didn’t see it this solution yesterday, but if the rule is simple enough, we can just use LESS color functions to set the default value of this color from the @header-default-bg. I don’t think it’s worth your time to find and note down hex values for every colortheme :slight_smile:


Thanks for the update, looks good to me :+1:

We could, but then we would rely a little bit more on LESS functions, and it will be harder to go LESSless in the future. It’s really no trouble for me to do it manually for the default themes.

Thanks for your input!

I just found a blog post about it, there’s a feature that’ll be fully supported soon and should map pretty well to LESS color functions :slight_smile:
So we should not restrain our use of LESS color functions in regards to this move :slight_smile:


image

1 Like

That’s very nice! I also didn’t know about this feature, I’ll try this on beta channels of chrome/firefox.
Thank you!