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.

navigation__top-bar

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 navigation__top-bar--global-links
Hover navigation__top-bar--global-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 navigation__top-bar--tanuki
Hover navigation__top-bar--tanuki-hover

Personal links

The personal links and plus button are white at 90% opacity. They change to 100% opacity on hover.

Resting navigation__top-bar--personal-links
Hover navigation__top-bar--personal-links-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

Specs

Meta issue #32794 (closed) - Global and Contextual Navigation

Edited by Chris Peressini