BUG : Header Title Misalignment and Chatbot Visibility Issues

[ayushku634]

Is there an existing issue for this?

• I have searched the existing issues

What happened?

Issue Summary

Hovering over header links causes misalignment of the "Open Source Village" title. Additionally, the chatbot is hidden behind the header, and there’s no padding in the chatbot’s text section, leading to readability issues.

Expected Layout Behavior

• Title Consistency: The "Open Source Village" title should maintain its alignment and spacing, even when hovering over other header links.
• Chatbot Visibility: The chatbot should appear fully above all other elements, including the header.
• Text Padding: The text within the chatbot should have sufficient padding to ensure clarity and readability.

Visual Impact

• Misalignment on Hover: The shifting title affects the overall visual stability of the header.
• Obstructed Chatbot: The chatbot being hidden makes interaction difficult, reducing its usability.
• Text Crowding: Without proper padding, the chatbot’s text appears cluttered, reducing user experience.

Screen.Recording.2024-10-08.at.8.30.40.PM.mov

Record

• I agree to follow this project's Code of Conduct
• I'm a GSSOC'24 contributor
• I want to work on this issue

[github-actions]

Congratulations, @ayushku634! 🎉 Thank you for creating your issue. Your contribution is greatly appreciated and we look forward to working with you to resolve the issue. Keep up the great work!

We will promptly review your changes and offer feedback. Keep up the excellent work! Kindly remember to check our contributing guidelines