search

NIAEFEUP / website-niaefeup-frontend

The frontend of the website for NIAEFEUP.
2 stars 0 forks source link

layout: fix content scrolling behind navbar #291

Open MRita443 opened 3 weeks ago

MRita443 commented 3 weeks ago

Currently, the navbar is set to fixed, so it doesn't occupy space in the layout. As a result, when content overflows vertically, it appears behind the navbar, and the page content is not properly centered. While removing the fixed positioning would fix this issue, we need the navbar to stay visible while scrolling. We should research solutions for this.

Example on login page 680x410: Image

Desired outcome: Image

MRita443 commented 6 days ago

If the transition is too stark, add a fade out gradient at the top of the page below the nav bar

RuiSoares333 commented 7 hours ago

Considering that the navbar should be visible at all times, from my point of view, there are 2 options:

Negative Margin Background Color Opaque
Image Image
By changing the main's div class margin to
mt-20 -mb-10 md:mb-20		 By adding height breakpoints to the tailwind.config file and then adding the following classes to the navbar
bg-vivid-red-900 backdrop-blur-sm bg-opacity-80 and
h-sm:bg-opacity-0 h-sm:backdrop-blur-none