Make Navbar Sticky and Fixed on Landing and Signup Pages

NitishKumar525 commented 1 month ago

Checks

[X] I have thoroughly read and understand The Odin Project Contributing Guide
[X] The title of this issue follows the Bug: brief description of bug format, e.g. Bug: Lesson complete button does not update on click
[X] Would you like to work on this issue?

Bug description

Objective: I would like to enhance the user experience of the project by making the navigation bar sticky and fixed at the top on the landing and signup pages. This will ensure that the navbar remains visible as users scroll through the content, making the site more user-friendly and attractive.

Why Me: As a Full Stack Developer with a strong focus on UI/UX design, I have experience in implementing responsive and dynamic features that enhance the user interface. I would love to contribute by making the navbar more functional and visually appealing.

Looking forward to your approval to work on this!

How to reproduce

Proposed Changes:

Sticky Navbar: Implement a sticky navigation bar that remains fixed at the top while users scroll down both the landing and signup pages.
Improved Aesthetics: Add subtle animations or effects when the navbar transitions into a sticky state to give the website a sleek and professional look.
Enhanced User Experience: The sticky navbar will provide easy and quick access to navigation links, improving the overall usability of the site.

Expected behavior

Benefits:

Increases accessibility by keeping key navigation links always visible.
Enhances the visual appeal of the site with modern design practices.
Improves user experience on both the landing and signup pages.

What browsers are you seeing the problem on?

Microsoft Edge

What OS are you using?

No response

Discord Name

No response

Additional Comments

No response

KevinMulhern commented 1 month ago

Thanks for the suggestion @NitishKumar525, but I'm not sure if this solves a problem we have right now?

KevinMulhern commented 1 month ago

Hey @NitishKumar525, I've been thinking a bit more about this. I'm not sure if it'll help our UX, but realise thats hard pretty to judge without being able to have a play with it. Is there a super quick/hacky version you could put together in a PR?

TheOdinProject / theodinproject