search

skanjo / samer.kanjo.net

The personal web site of Samer Kanjo
https://samer.kanjo.net
0 stars 0 forks source link

Mobile menu nav padding is slightly off #33

Closed skanjo closed 5 months ago

skanjo commented 5 months ago

The mobile menu nav bar padding does not match the underlying padding of the same element on the page. I think it is off by 2px.

skanjo commented 5 months ago

My intent was to have the mobile menu logo and site name perfectly overlap with the same from the main navbar however I can see that the mobile menu is positioned differently being slight to the right of the left side. I need to do some testing on different mobile sizes to determine an approach to solving this problem. This is when phone is in portrait. When in landscape this is not a problem as the menu does not extend far enough left to obscure the underlying navbar.

skanjo commented 5 months ago

Using Polypane to test various widths for various devices and finding my approach of trying to reproduce the underlying navbar in the mobile menu seems to cause some UI confusion. I am using max-w-sm to confine the max width of the menu and w-full to expand to that size. However the sm breakpoint does not fit all mobile cases. I tried md breakpoint and still fell a bit short. Trying to lg breakpoint seems to work as I originally intended. Going to test a bit more.