Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhance Navigation Links: Improve Responsiveness and Hover Effects #330

Closed
wants to merge 5 commits into from

Conversation

ahmedrazabaloch
Copy link
Contributor

Enhance the styling of navigation links for improved responsiveness and user experience.

  • Updated the .navlinks margin for better spacing across devices.
  • Adjusted the .link display settings for a consistent flexbox layout.
  • Modified .link a styles to improve alignment of text and icons.
  • Introduced a subtle shadow effect on hover to enhance visual feedback.
  • Added media queries for responsive adjustments, ensuring the design adapts on screens smaller than 420px.
  • Reduced font size and padding for links on smaller devices to maintain compactness.

These changes provide a cleaner and more user-friendly navigation experience across various screen sizes.

Before

screencapture-127-0-0-1-5500-Todo-html-2024-10-30-02_25_52

After

screencapture-127-0-0-1-5500-Todo-html-2024-10-30-02_31_31

@ahmedrazabaloch
Copy link
Contributor Author

@Anshgrover23 As I mentioned in the previous pull request, when the screen is smaller, the navbar layout overflows. That's why the text is hidden on smaller screens.

@ahmedrazabaloch ahmedrazabaloch closed this by deleting the head repository Oct 31, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant