Refactor Navbar for Enhanced User Experience #2235
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary: This PR introduces changes to the website’s navbar to improve user navigation and overall user experience. Key modifications include:
Design Updates:
• A cleaner and more modern layout, featuring better alignment , improved visual hierarchy and added slight animations.
Changes:
• Updated the CSS for the navbar to align with new design standards.
• Updated a hamburger menu for mobile view.
• Implemented smooth scroll transitions between sections.
• Updated color scheme for better visibility and consistency.
Impact:
• Improved overall navigation experience, especially on mobile.
• Enhanced website accessibility.
• A more modern, streamlined look and feel.
Before:
• Desktop View
![julia-pc](https://private-user-images.githubusercontent.com/104264470/409969115-4d954e19-49cb-42cb-9dc2-1678763c6c9c.jpg?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkxNzE2NzksIm5iZiI6MTczOTE3MTM3OSwicGF0aCI6Ii8xMDQyNjQ0NzAvNDA5OTY5MTE1LTRkOTU0ZTE5LTQ5Y2ItNDJjYi05ZGMyLTE2Nzg3NjNjNmM5Yy5qcGc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjEwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxMFQwNzA5MzlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0zMzdjZjcyYjczNmQ1ZjkxZWQ2MTQ4MDkxMWVmOTY0ZGFmN2YyZjdhYTdiNDFjMzFkZTIzN2RiMzc0ZjBiMjQ1JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.QG_qNoGM_LR88s5K3Y5w5ZBKKVxFEXX83b28v3NdMm8)
• Mobile View
![juliaorg-mobile](https://private-user-images.githubusercontent.com/104264470/409969395-5e1aa4dc-7710-4e32-b1f2-da8afa646b11.jpg?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkxNzE2NzksIm5iZiI6MTczOTE3MTM3OSwicGF0aCI6Ii8xMDQyNjQ0NzAvNDA5OTY5Mzk1LTVlMWFhNGRjLTc3MTAtNGUzMi1iMWYyLWRhOGFmYTY0NmIxMS5qcGc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjEwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxMFQwNzA5MzlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1kZmM5MjFkZGMyYjQyZjViOThlNTZkN2I5ODc4Y2VlZmYzOTFlOWJkMDQ0OTg0MmExOTczNGE0MWVjOTQxZjc5JlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.9Dd2MkQf8Hzta9QlyvH-zbh7B_OCUf4Ktnazf-_m5GE)
After
• Desktop View
![local-pc](https://private-user-images.githubusercontent.com/104264470/409969502-767e07b1-d49e-44e8-95f2-935fd96182c1.jpg?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkxNzE2NzksIm5iZiI6MTczOTE3MTM3OSwicGF0aCI6Ii8xMDQyNjQ0NzAvNDA5OTY5NTAyLTc2N2UwN2IxLWQ0OWUtNDRlOC05NWYyLTkzNWZkOTYxODJjMS5qcGc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjEwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxMFQwNzA5MzlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1lNmJjNGZhZTA1MzU3YWZkNjZiNWY2YzNiMGIxZmE2MWIyZmU2NWQ5ODA0YzdmZjMwNmUyMGViMmM2MDg3NjZlJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.KGgyoiZCOO98iNv5TU5QUUHNE5G_oJyTxx7LaoTrJe4)
• Mobile View
![local-mobile](https://private-user-images.githubusercontent.com/104264470/409969701-295cdc48-6e06-4c72-a65b-638442794643.jpg?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzkxNzE2NzksIm5iZiI6MTczOTE3MTM3OSwicGF0aCI6Ii8xMDQyNjQ0NzAvNDA5OTY5NzAxLTI5NWNkYzQ4LTZlMDYtNGM3Mi1hNjViLTYzODQ0Mjc5NDY0My5qcGc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjUwMjEwJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI1MDIxMFQwNzA5MzlaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT02MjNmZmNmNzM1YWM3NjcyZTA0N2RmOWNjNmM5NzA2ZDI0MmJlOWNlZjI5MDNkNGRmN2RmYWI5NzlhNDYwZjUyJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCJ9.ack5CWbpKBEI6Oajv-W1rdj4xMQ7-h_XdHUylN2cV6g)
Testing:
• Verified the navbar responsiveness across different screen sizes (desktop, tablet, mobile).