Enhance Navbar Responsiveness and Design

[ajaynegi45]

Issue Description:

• Currently, our Navbar is not responsive for tablet and mobile views, and it's only visible on larger screens. Additionally, it lacks a modern and visually appealing design. To provide a better user experience and a sleek look, we need to make the Navbar responsive, add a maximum width, and incorporate a Glass morphism effect.

Requirements:

1. Screen Size Responsiveness: Implement a toggle menu for tablet and mobile views to ensure that the Navbar adapts to smaller screen sizes. Users should be able to access the menu easily on these devices. Cover Full screen and come from Top to bottom animation

2. Maximum Navbar Width: Fix the maximum width of the Navbar for larger screens to maintain a consistent layout. This prevents the Navbar from extending too wide on larger displays.

3. Glass Morphism Effect: Apply the Glass morphism effect to the Navbar elements. This effect adds a modern and visually appealing touch to the Navbar's design.

    /* Background with transparency */
    background-color: rgba(251, 251, 253, 0.8); /* last value is for transparency */

    -webkit-backdrop-filter: saturate(180%) blur(20px);

    backdrop-filter: saturate(180%) blur(20px);

These improvements will enhance the usability and aesthetics of our Navbar across various screen sizes. If you have any questions, suggestions, or ideas for the implementation of these enhancements, please feel free to share them in the comments.

Thank you for your commitment to improving our website's user interface and design!

[waleedkhano]

Hello, @ajaynegi45! May I join in and work on this?

[Sky-De]

@ajaynegi45 hi, i can fix this for you, i would like to work on this issue, please assign this to me, notice that i will not start workin on this issue before getting assignment, thanks for your understanding

[Raghu1124]

hello @ajaynegi45 , i would like to contribute to this issue, please assign me, thanks

[anubhav1206]

Can I work on this?

[ajaynegi45]

Hello @anubhav1206 @Sky-De @waleedkhano @Raghu1124,

Thank you all for your interest in contributing to this task. I appreciate your willingness to help improve our navbar

To make this process more collaborative, I'm assigning this task to all of you. You can each work on your own version. In the end, we will evaluate the contributions and choose the one that best aligns with our project's needs and goals.

Please coordinate among yourselves and feel free to discuss any questions or ideas you may have during the process. Once you've completed your contributions, please submit them for review.

Looking forward to seeing your work and thank you for your valuable contributions! ❤️