Navigation - Change top bar style
Background color
The default background color for the top bar will be $purple-900, as defined in #28614 (closed). The purple colors are not yet in the variables.scss file.
Global links
The resting color for the global links is white at 90% opacity. When hovering, they change to 100% opacity and a white underline appears. There's 16px padding on either side of each link.
| Resting | ![]() |
| Hover | ![]() |
Tanuki + GitLab
The Tanuki + GitLab has 20px padding on either side and is constantly at 100% opacity. It also adds the underline on hover.
| Resting | ![]() |
| Hover | ![]() |
Personal links
The personal links and plus button are white at 90% opacity. They change to 100% opacity on hover.
| Resting | ![]() |
| Hover | ![]() |
Search bar
The fill color for the search bar is $purple-800. Its border color is #2C0A5C, which is darker than the $purple-900.
Resources
Meta issue #32794 (closed) - Global and Contextual Navigation
Edited by Chris Peressini






