The navigation menu is not vertically centered on mobile

Contribute UX

AI-generated summary

The navigation menu on mobile is not vertically centered between the header and main content due to padding and margin issues. Canapin identified that the #main-outlet has a padding-top of 20px (or 1.25em) and the navigation bar’s bottom margin is 12px (or 0.75em). To fix this, Canapin suggests tweaking some attributes/values to center the navigation bar vertically.

1

The padding-top or #main-outlet is 20px[1]:

The image is a screenshot of issue tracking and support tickets on a platform called "#main-outlet." (Captioned by AI)
The image is a screenshot of issue tracking and support tickets on a platform called "#main-outlet." (Captioned by AI)387×860 68.6 KB

The navigation bar’s bottom margin is 12px[2]:

The image shows a hidden menu for an IsCourse navigation bar, displaying CSS properties and access settings. (Captioned by AI)
The image shows a hidden menu for an IsCourse navigation bar, displaying CSS properties and access settings. (Captioned by AI)387×860 68.7 KB

The result is that the navigation bar is not vertically centered between the header and the main content:

image


The image depicts a screen capture of the'Isocourse' Discord server showing a stream of latest messages including support inquiries, plugin issues, and updates about features like a new composer and a topics voting system. (Captioned by AI)
The image depicts a screen capture of the'Isocourse' Discord server showing a stream of latest messages including support inquiries, plugin issues, and updates about features like a new composer and a topics voting system. (Captioned by AI)387×860 77.6 KB

My suggestion is to tweak some attributes/value(s) so the navigation bar is vertically centered:

The image shows a list of discussions on the Isocourse website forum, including topics on sidebar issues, votes display improvements, email support, server maintenance, a new composer, and an introduction to DisCorkie. (Captioned by AI)
The image shows a list of discussions on the Isocourse website forum, including topics on sidebar issues, votes display improvements, email support, server maintenance, a new composer, and an introduction to DisCorkie. (Captioned by AI)387×860 78.3 KB

  1. 1.25em ↩︎

  2. var(--nav-space): 0.75em ↩︎