I'm looking to create a sticky navbar with a blur effect similar to the one seen on (try scrolling to see the blur effect on the nav). I want it to have the following structure:
My HTML code is as follows:
<header class="sticky z-10 top-10">
<nav class="backdrop-filter backdrop-blur flex items-center justify-center h-16 font-semibold text-sm after:absolute after:inset-x-0 after:w-full after:h-12 after:shadow-hr after:z-[-1] mt-12">
<section class="h-full">
<a class="flex items-center justify-center h-full pl-4" href="/"><svg width="176" height="177" viewBox="0 0 176 177" xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 fill-current dark:text-white -rotate-6"><path d="M56.576.872h4.352l20.224 70.144L51.712 177H.512L56.576.872zm57.6 144.896H71.424l10.752-39.424h20.48L72.448.872h46.848L175.36 177h-52.224l-8.96-31.232z" fill="currentColor"></path></svg><span class="text-lg sr-only"></span></a>
</section>
...
</nav>
</header>
<h1 class="text-5xl font-bold text-center font-serif mt-20">All Essays By Date</h1>
<h2 class="w-3/4 mx-auto mt-4 mb-8 text-lg font-semibold text-center text-gray-700 dark:text-gray-300 sm:w-2/4">Scroll down to browse all of my essays by date and title. Essays are listed in reverse chronological order with my newest essay at the top and my oldest essay at the bottom.</h2>
<main class="prose block mx-auto">
<p>Have you ever visited a website and been completely in awe of the elegance and simplicity of its design? For me, that website is <a target="_blank" rel="noopener noreferrer" href="https://stripe.com/">Stripe</a>. Stripe is a company that allows people and businesses to accept payments online and in mobile apps. That doesn't sound like a company that would have an exquisite website design, but look at how Stripe describes themselves on their about page.</p>
...
</main>
The crucial part to focus on is the nav. The other HTML content is added to facilitate scrolling.
I have provided a Tailwind Play reproduction.
Essentially, I want the content to scroll under a sticky nav without overlapping. How can I achieve this effect?
I applied backdrop-filter backdrop-blur to the nav for the blur effect, but the content scrolls over the nav as my height may not be sufficient.
I tried setting a specified height to the header along with various other properties like:
height: 92px;
background: darkred;
position: relative;
top: 0;
However, it doesn't fully go to the top. I believe I may need to add a simple div with a background color similar to the body, but I'm unsure where to place it. Should it be within the header?
In essence, I want the navbar to stand out with the content scrolling below it. How can I achieve this?