Fix: Sticky header not blurring with search overlay when stickyNav is enabled

[ZeeL981210]

Describe the bug Please see the figure below:

I suppose the header shall be hidden in such case, which the searching section is popped. And also in this case, if you click the search button once-more, all the components are shifted to the left upon each click.

To Reproduce When configure stickyNav to true in siteMetadata.js, it allows the header to stick on top of the page

1. Go to siteMetadata.js
2. Set stickyNav to true

Expected behavior Normally the header should be blured as shown in the figure below:

Additional context I attempted to fix it, but I failed. My best guess is that this issue is related to

 if (siteMetadata.stickyNav) {
    headerClass += ' sticky top-0 z-50'
  }

that in Header.tsx, because when I modify the z-index to smaller than 10, this specific issue get fixed, but it will cause the code block/media player float over the header.

Hope all above helps.

[timlrx]

Yep, it's a little tricky since currently most of the stacking logic with the exception of the sticky bar is handled via stacking context. I think I would have to modify the pliny component to allow letting the user specify their own classname so the relative z-index can be better managed

[ZeeL981210]

Thank you for the reply. I think that's a great way to solve the problem.

[timlrx]

Fixed in pliny v0.4.0. I decided to add a z-index: z-50 to the overlay instead.