Fix Navbar Overlap and Enhance Discord Invite UI on Support Page

[rythmlongia]

Description

Fixes # 8104

• Fixed the support page navbar so it no longer overlaps or hides page content while scrolling.
• Improved the UI of the Discord invite section for a cleaner and more consistent appearance.

Fixes #8104

[retenta-bot]

This PR resolves the navbar overlap issue and improves the Discord invite UI, which is crucial for user navigation and engagement. It's worth noting that there have been previous discussions regarding the Discord invite link to ensure consistency across the application. Please refer to the related decision on updating the support page to use the canonical Discord invite link for context. Thank you for your contributions!

[github-actions]

📦 Next.js Bundle Size Report (Gzipped Sizes)

Asset	PR Size	Base Size	Difference	Status
static/css/[hash].css	41.93 KB	41.95 KB	-0.01 KB (-0.03%)	🟢 Improvement

📊 Summary of Totals

Category	PR Size	Base Size	Difference
Total JS	4052.54 KB	4052.50 KB	+0.04 KB (+0.00%)
Total CSS	338.76 KB	338.94 KB	-0.19 KB (-0.05%)

[Aamod007]

Thanks for fixing the navbar overlap and enhancing the Discord button UI!

I noticed your commit message is \Fix support page navbar UI, which doesn't follow the Conventional Commits format required in our checklist. Could you please amend your commit message to something like \ix(support): fix navbar overlap and enhance discord invite ui\ and force push?

I'll approve this right after that's fixed! 🎨

[vercel]

@rythmlongia is attempting to deploy a commit to the jhasourav07's projects Team on Vercel.

A member of the Team first needs to authorize it.

[rythmlongia]

@Aamod007
Hello sir, I have updated the commit message to follow the Conventional Commits format and force-pushed the changes. Thanks for the review!

[Aamod007]

Thanks for looking into this styling issue on the support page!

However, completely removing the \ixed\ class from the <nav>\ is not the best approach here, as it breaks the sticky behavior of the navbar when the user scrolls down the page. The standard way to fix content overlapping a \ixed\ navbar is to add adequate padding (like \pt-20\ or similar) to the top of the main content container (<main>\ or the next <div>) so it sits below the navbar.

Additionally, using \mr-10\ on the Discord button feels a bit like a workaround. Consider using flexbox gap properties on the parent container if you're trying to separate it from adjacent elements.

Please restore the \ixed\ class and apply top padding to the main content instead.

Label Justification:

• \level:beginner: CSS padding/margin and positioning fixes fall under beginner-level styling tasks.
• \ ype:bug: Fixes layout overlap.
• \ ype:design: Modifies UI layout and spacing.
• \mentor:Aamod007: Assigned as required.

[rythmlongia]

@Aamod007
Hello sir,

I understood the issue and have already corrected the Discord button by removing the margin-based spacing.
However, I encountered an issue with the navbar. The application already renders a global fixed navbar through the root layout. If I restore the fixed class on the support page's "Back to Home" navbar, there are effectively two fixed navbars. When scrolling back up, both become visible, and simply adding top padding does not resolve the overlap between them.
That's why I initially made the support page navbar non-fixed, since the global navbar already provides navigation across the application and the local navbar mainly contains the "Back to Home" button.
If i use padding it will not make the content hide before reaching the top it will just increase the space between the navbar and content in the starting. So keeping it sticking is possible if either we hide the main navbar or if making the background of navbar dark but it may not be appealing to eye.
I will be happy to implement whichever approach you prefer.

[github-actions]

⚠️ Hey @rythmlongia, this pull request has been inactive for 3 days. It will be automatically closed in 2 days if no further activity occurs.

If you are still working on this, please push your latest changes or leave a comment to keep it active.