fix: The size of the navbar seems off, and the red line that appears when we click doesn’t quite fit the design. #1486

[jhuma20]

Title and Issue number

Title : Fix navbar size and remove red line from navlink section

Issue No. : 1486

Code Stack : CSS

Close #1486

Description

1.Improved the layout and styling of the navigation bar to ensure all elements are visible and properly aligned. Specifically, I made the following changes:

*Adjusted the styles for .nav-container to set its width to 100%, display as flex, and position as fixed, ensuring it takes up the full width of the screen.
*Fixed the size of the navigation elements, making sure the view button is now clearly visible.
*Refactored the CSS styles for .navLinks to improve its layout and positioning, ensuring it is properly aligned with other navigation elements.

"Previously, the navigation bar had layout issues, and the view button was not visible. After these changes, the navigation bar is now properly styled, and all elements, including the view button, are clearly visible."

2. Updated the styles for navigation links to improve their appearance and behavior. Specifically, I made the following changes:

*Set the position of navigation links to relative, removed text decoration, and set the color to white.
*Added a pseudo-element to navigation links to create a hover effect, but initially set its width and background color to transparent.
*On hover, changed the text color to red, but kept the pseudo-element's width and background color transparent, effectively removing the underline or bottom border.

"Previously, navigation links had an underline or bottom border on hover, which has been removed to improve the overall design."

Video/Screenshots (mandatory)

Type of PR

• Bug fix
• Feature enhancement
• Documentation update
• Other (specify): _______________

Checklist:

• I have performed a self-review of my code.
• I have commented my code, particularly in hard-to-understand areas.
• I have tested the changes thoroughly before submitting this pull request.
• I have provided relevant issue numbers, screenshots, and videos after making the changes.
• I have gone through the contributing.md file before contributing

Additional context:

##Are you contributing under any Open-source programme?

• I am contributing under GSSOC'24
• I am contributing under VSOC'24

[netlify]

✅ Deploy Preview for taupe-cendol-f7e2bb ready!

Name	Link
🔨 Latest commit	9dfb565
🔍 Latest deploy log	https://app.netlify.com/sites/taupe-cendol-f7e2bb/deploys/670b416d046bc500080b42ee
😎 Deploy Preview	https://deploy-preview-1509--taupe-cendol-f7e2bb.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[github-actions]

Hi @jhuma20! Thank you for your valuable contribution! Our team will review it and get back to you soon.

[apu52]

@jhuma20 good work