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:
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:
What do you think of it?
Thanks all
2 posts - 2 participants