fix(nav): maintain consistent width on mobile and tablet, enable vert…

[Katotodan]

Description

This PR fixes the navigation responsiveness issue on mobile and tablet devices.
Previously, when the menu icon was clicked, the navigation list appeared with a small width. When a dropdown item inside the navigation was expanded, the width of the navigation container increased unexpectedly, causing layout instability on smaller viewports.

Changes Made

• Set a consistent width for the navigation container on mobile and tablet viewports.
• Prevented width expansion when dropdown items are toggled.
• Enabled vertical scrolling when navigation items overflow vertically.
• Improved layout stability and overall user experience on smaller screens.

Before:

Screen.Recording.2026-02-24.at.10.49.04.mov

After

Screen.Recording.2026-02-24.at.10.51.32.mov

This PR fixes #2602

Notes for Reviewers

Signed commits

• Yes, I signed my commits.

[netlify]

✅ Deploy Preview for mesheryio-preview ready!

Name	Link
🔨 Latest commit	9f286f4
🔍 Latest deploy log	https://app.netlify.com/projects/mesheryio-preview/deploys/69aec6f9dec4920008b32d83
😎 Deploy Preview	https://deploy-preview-2603--mesheryio-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[gemini-code-assist]

Summary of Changes

Hello @Katotodan, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request addresses and resolves responsiveness issues within the application's navigation system on mobile and tablet devices. The primary goal was to ensure a stable and predictable user interface, particularly when interacting with navigation menus and dropdowns, by controlling their dimensions and behavior on smaller viewports.

Highlights

• Consistent Navigation Width: The navigation container on mobile and tablet viewports now maintains a consistent width, preventing unexpected expansion.
• Prevented Width Expansion on Dropdown Toggle: Dropdown items no longer cause the navigation container's width to increase when toggled, ensuring layout stability.
• Enabled Vertical Scrolling: Vertical scrolling has been enabled for navigation items that overflow, improving usability on smaller screens.
• Improved Layout Stability: Overall layout stability and user experience on mobile and tablet devices have been enhanced.

Changelog

• _includes/header.html
  • Commented out the conditional logic for loading stellarnav.css, making it always load unconditionally.
• _includes/navigation.html
  • Corrected the indentation of the <ul> tag for sub-navigation items.
• _sass/navigation.scss
  • Changed mobile navigation list positioning from absolute to fixed and centered it horizontally.
  • Introduced width, max-width, max-height, and overflow-y properties to control the navigation list's dimensions and enable vertical scrolling.
  • Added overflow-x: hidden to prevent horizontal scrolling.
  • Applied padding and a box-shadow for improved visual presentation and depth.

Activity

• No activity has been recorded for this pull request yet.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request addresses responsiveness issues on mobile and tablet devices by ensuring a consistent navigation width and enabling vertical scrolling for overflowing content. The changes primarily involve adjustments to CSS in _sass/navigation.scss and minor HTML formatting in _includes/header.html and _includes/navigation.html. The changes improve the user experience on smaller screens by preventing unexpected layout shifts.

[gemini-code-assist]

Using !important should generally be avoided as it can make CSS harder to maintain and debug by overriding normal cascade rules. Consider if there's a way to achieve the desired specificity without !important.

[saurabhraghuvanshii]

@Katotodan Also address this.

[Katotodan]

@saurabhraghuvanshii I have remove the !important on my last commit. Please review when you can. Thanks!

[Bhumikagarggg]

@Katotodan Thank you for your contribution! Let's discuss this during the website call today at 6:30 PM IST | 7 AM CST Add it as an agenda item to the meeting minutes, if you would 🙂