Navbar height shifts when search icon appears on scroll (layout shift)

[sm-28601]

Current Behavior

On the Layer5 Community Forum (https://discuss.layer5.io/), when scrolling down the page, a search icon appears in the navbar. When this icon appears, the navbar height reduces, causing a noticeable layout shift.

This results in a slightly jarring visual effect while scrolling.

---

Expected Behavior

The navbar height should remain consistent during scroll. The appearance of the search icon should not cause any change in navbar height or layout shift.

---

video

m7.mp4

---

To Reproduce

1. Go to https://discuss.layer5.io/
2. Start scrolling down the page
3. Observe the search icon appearing in the navbar
4. Notice the navbar height reducing and causing a layout shift

---

I would be happy to work on this improvement if approved.

Contributor Guides and Resources

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

[sm-28601]

@saurabhraghuvanshii Please assign this issue to me.