Skip to content

Lock navbar and add border/shadow styling#3635

Open
ankitkr104 wants to merge 2 commits intogithub:mainfrom
ankitkr104:fix/sticky-navbar-shadow
Open

Lock navbar and add border/shadow styling#3635
ankitkr104 wants to merge 2 commits intogithub:mainfrom
ankitkr104:fix/sticky-navbar-shadow

Conversation

@ankitkr104
Copy link
Copy Markdown

@ankitkr104 ankitkr104 commented Apr 12, 2026

Summary

This PR improves the top navigation behavior and visual separation on scroll.

What Changed

  1. Locked the top navbar so it stays visible while the page content scrolls.
  2. Added a bottom border to the navbar.
  3. Added a subtle shadow to the navbar for clearer separation from page content.

Why
Keeping the navbar fixed improves navigation usability, especially on long guide pages.
The border and shadow make the fixed navbar feel intentional and easier to distinguish from the content beneath it.

Recording:

new.mp4
  • Have you followed the contributing guidelines?
  • Have you explained what your changes do, and why they add value to the Guides?

Please note: we will close your PR without comment if you do not check the boxes above and provide ALL requested information.


Copilot AI review requested due to automatic review settings April 12, 2026 06:12
@ankitkr104 ankitkr104 requested a review from a team as a code owner April 12, 2026 06:12
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR updates the site’s top navigation styling so the navbar remains visible during scroll and has clearer visual separation from page content.

Changes:

  • Made the top navbar sticky (position: sticky; top: 0) so it stays at the top while scrolling.
  • Added a bottom border and subtle box shadow to visually separate the navbar from content.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

- Add scroll-padding-top to html to offset navbar height
- Add scroll-margin-top to article headings for smoother anchor scrolling
- Prevents headings from being hidden under sticky navbar when navigating via TOC or hash links
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants