Navbar Oversizing on Mobile – Requires Responsive Adjustment

[Ankul8471]

Description

On mobile devices, the navbar displays as excessively large, taking up a disproportionate amount of screen space and reducing usability. This issue likely arises from fixed dimensions or lack of responsive CSS properties, causing elements like the logo and menu icon to scale inappropriately. To enhance mobile user experience, the navbar needs adjustments to ensure proper scaling and alignment within smaller viewports. Implementing responsive CSS, such as setting maximum heights for elements and utilizing viewport-relative units, will resolve the issue and create a more user-friendly design on mobile devices.

Steps to Reproduce

Open the website on a mobile device or in a mobile view (e.g., using developer tools to simulate a screen width of 768px or less). Observe the navbar area, including the logo, menu icon, and any padding/margins around them. Note how much space the navbar occupies compared to the content below it.

Expected Behavior

The navbar should adjust its height and element sizes to fit proportionally within the mobile viewport. The logo, menu icon, and any text should scale down appropriately to avoid taking up excessive screen space. Users should be able to see more of the main content without needing to scroll past an oversized navbar.

Actual Behavior

The navbar appears oversized on mobile screens, occupying too much vertical space. The logo and menu icon do not scale down adequately, leading to an imbalanced layout. This affects the user experience by limiting the visible area for main content upon loading.

Screenshots

Additional Information

The issue may be due to fixed dimensions set for the navbar, logo, or menu icon in CSS, which prevents the navbar from adapting to smaller screens. Implementing responsive CSS with relative units like vw, vh, or % can help scale the navbar correctly. Testing on various mobile screen sizes is recommended to ensure the navbar is consistently responsive across devices.

What browser are you seeing the problem on?

• [ ] Firefox
• [X] Chrome
• [ ] Safari
• [ ] Microsoft Edge

Checklist

• [X] I have checked the existing issues
• [X] I have read the Contributing Guidelines
• [X] I want to work on this issue. (optional)

[github-actions[bot]]

Hi there! Thanks for opening this issue. We appreciate your contribution to this open-source project. We aim to respond or assign your issue as soon as possible.

[Ankul8471]

I would like to work on this please assign me this issue.

[vivekvardhan2810]

Hi, I have seen many navbar and header based issues, and i have mentioned it before for contributors to not create issues regarding navbar and there should be no more navbar issues, so i have closed this issue, if you have any queries, you can join discord server for further updates and communication.

we are not looking for navbar and header updates for now, as it was done and changes many times before. And for home pages also.

please understand.

And one more thing this project is going to be inactive from today night including me. Reason being due to some of my works.

[Ankul8471]

ok

[Ankul8471]

I understand but if you allow then I will solve this within 1 hour its help me a lot

[vivekvardhan2810]

@Ankul8471 can you fix this within an hour.

this will be the last issue that i am gonna assign you.

will this be okay for you.

[vivekvardhan2810]

this will be the last issue that i am gonna assign you.

[Ankul8471]

ok sir

[Ankul8471]

thank you sir i solve within 1 hours and trying to solve as soon as possible

[vivekvardhan2810]

@Ankul8471 assigning this issue to you.

Make sure to complete this fast.

this will be the last issue i am assigning you.

As i have said early this project is going to be inactive from today night including me. Reason being due to some of my works.