Navigation - Reduce header height and redesign active/hover/dropdown styles

Resources

FE @annabeldunstone

Description

• Reduce header height: Having as much vertical screen space as possible is very important to users. Being a fixed element, always visible on the screen, the header can be further reduced.
• Show all global links by default and collapse them into a “More” dropdown as space gets tighter (per https://gitlab.com/gitlab-org/gitlab-ce/issues/35091)
• Reduce size of GitLab logo and font size of global navigation elements
• Redesign header active/hover/dropdown styles: The current active style in the header boldens the text, which moves the links when navigating from page to page
• Change the icon of the “New…” button to fa-plus-square and move it to the left of the search bar
• Place “Help” inside the user dropdown for logged in users and in the global navigation for anonymous users

Proposal

Check all design variations and specs (for implementation notes, spacing, sizes, colors and text copying)

Links / references

• Meta: https://gitlab.com/gitlab-org/gitlab-ce/issues/32794