[BUG] Fix Navbar Responsiveness on Medium-Sized Devices

[ShaliniKashyap717]

Description

The current navbar in the coffee shop project has a responsiveness issue:

• Menu Icon and Expanded Menu Overlap: On medium-sized devices, both the menu icon (used for small devices) and the expanded menu (used for larger screens) are displayed simultaneously. This creates redundancy, as both serve the same purpose.
• Expected Behavior: Only one of the two (either the menu icon or the expanded menu) should be visible at a time, depending on the screen size.

Impact

• This creates visual clutter and confusion for users on medium-sized devices.
• It affects the usability and professional appearance of the navbar.

Proposed Solution

• Update the media queries in the CSS to ensure that:
• The menu icon is displayed only on small screens.
• The expanded menu is displayed on larger screens.
• Ensure there is a smooth transition between the two layouts when resizing the browser or switching devices.
• Test the responsiveness across different devices and screen resolutions to ensure consistency.

Kindly assign this task to me under the SWOC label.

Screenshots

https://drive.google.com/file/d/14fjMOeHDvP5O5zNHwF8NxuYQjqiIxzB2/view?usp=sharing

Any additional information?

No response

What browser are you seeing the problem on?

Chrome

[Mujtabaa07]

@ShaliniKashyap717 assigned

[Kroszborg]

interested