Fix Navbar Z-Index #313

Describe the bug
The navigation/header bar does not reliably maintain its stacking order. Buttons in the page content (e.g. "Access the Playground") appear visually on top of the sticky header as you scroll.

Root Cause
btn.style.js hardcodes z-index: 999 on every Button component. The header's z-index is sourced from the styled-components theme (theme.zIndex.navbar). If the theme context is unavailable or misconfigured during render, the header receives no z-index at all — allowing z-index: 999 buttons to paint over it.

Expected Behavior
The navbar should always remain above page content while sticky.

Steps to Reproduce

1. Open the site
2. Scroll down past the "Access the Playground" button
3. Observe the button / its ring animation overlapping the sticky navbar

Screen Recording

Contributor Guides and Resources

• 🛠 Meshery Build & Release Strategy
• 📚 Instructions for contributing to documentation
  • Meshery documentation site and source
• 🎨 Wireframes and designs for Meshery UI in Figma (open invite)
• 🙋🏾🙋🏼 Questions: Discussion Forum and Community Slack