search

timlrx / tailwind-nextjs-starter-blog

This is a Next.js, Tailwind CSS blogging starter template. Comes out of the box configured with the latest technologies to make technical writing a breeze. Easily configurable and customizable. Perfect as a replacement to existing Jekyll and Hugo individual blogs.
https://tailwind-nextjs-starter-blog.vercel.app/
MIT License
8.75k stars 2.04k forks source link

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

Closed ZeeL981210 closed 5 days ago

ZeeL981210 commented 1 week ago

Describe the bug Please see the figure below:

image

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:

image

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 commented 1 week ago

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 commented 5 days ago

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