Struggling to keep navbar fixed with a blur effect without it colliding with body content as you scroll?

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?

Answer №1

I found a clever way to make the content stick while appearing blurred underneath by implementing a few techniques:

  1. Switched from using margin to padding, transforming mt-12 to pt-12
  2. Inserted pb-10 to enhance the effect
  3. Adjusted backdrop-filter backdrop-blur from nav to header

Here is the modified code snippet:

<header
  className="sticky top-0 z-10 pt-12 pb-10 backdrop-filter backdrop-blur
                   dark:bg-primary dark:text-white"
>
  <nav
    className="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]"
  ></nav>
</header>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Stuffing a container with an image without considering the proportions

I am experimenting with filling a parent <div> with an image without concern for proportions. Despite knowing that it may not look great at all sizes, I just want to test its feasibility. Currently, the image is scaling instead of stretching to fit m ...

How should one go about properly sizing and formatting image icons?

Currently, I'm exploring the most efficient ways to optimize image loading speed on a webpage. Specifically, I am looking for advice on the best method for resizing an image from 1600x900 to 890x500. Method 1 Utilize the following code: <img src= ...

How can I define margins for a specific div in print media using CSS?

Hello everyone, I'm currently experiencing an issue with my print media CSS. On the HTML page, there are two main divs - one for the body and one for the footer. <div class="main-template-body" id="main-template-body"> //content </div> ...

The CSS styling is not being rendered correctly on the AngularJS HTML page

Encountering a puzzling situation here. Our angular controller is successfully delivering data to the page, but we are facing an issue with rendering a table due to an unknown number of columns: <table border="1" ng-repeat="table in xc.tables"> ...

Discover the key steps to extracting codes within a string in React or Javascript

I am currently developing an application that could potentially receive a string from the backend server. The string might look something like this: If you were to fold a piece of paper in half 50 times, its width would be three-quarters of the distance fr ...

Position this menu in the top left corner using HTML and CSS

Is there a way to position the vertical menu completely in the top-left corner without any margin? I've set all margins to 0 but there is still about 2px of space. Any ideas on how to fix this? Thank you in advance! ...

SQL Delete rows from Table

I am dealing with an issue where a table displaying notices has a clear option next to each row, but when the clear button is clicked nothing happens. The setup involves a button that triggers a clear function. What could be causing this problem? <bu ...

Customizing WordPress using CSS overrides in the Pinboard theme

I'm currently customizing a WordPress theme for my website (pinboard theme) and so far, it's been an amazing experience. One of the features of this theme is a built-in slider/carousel. However, I am looking to change the title of the slider from ...

When zooming in or out on a mobile device, an unusual white line appears

Encountering a strange white gap on mobile devices when zooming in or out. This issue seems to be related to the use of background-color on sections. Strangely, the problem only occurs on mobile devices while zooming in, but does not appear on normal deskt ...

What is the best way to combine a custom CSS class and a bootstrap class to style an element in next.js?

In the following example, the CSS class is imported and then applied to the element: import customStyles from "./Home.module.css"; <div className={(customStyles.collection, "card")}> Although they work individually, when combined as shown above, t ...

Utilizing Bootstrap's Multi-Grid System

I am currently working on implementing a Bootstrap grid design that resembles pic1.jpg. However, I am facing challenges in achieving the desired layout, as pic2.jpg shows the current scenario. Below, I have shared the code I am using. pic1.jpg :- ! pic2. ...

Guide: Creating a delete button that removes a designated post

I am encountering an issue with the delete button and dialog in my application. The button does not delete the correct post; instead, it always starts deleting from the first post that results in deleting all posts. Furthermore, the template does not displ ...

Here's a tutorial on creating a dropdown menu containing a list of years. When a specific year is selected, the table will display the individuals who registered during that year using PHP

<table class="table table-striped table-bordered bootstrap-datatable datatable"> <thead> <tr> <th></th> <th>Business Name</th> <th>Commencement Da ...

Achieving Perfect Vertical Alignment in Bootstrap 4 Grid Cells

I am currently working on an admin page that involves querying and reporting on the page weights of key pages on a website, such as landing pages. Bootstrap 4 is in the pipeline, and I have utilized it to design a layout that I am satisfied with. However, ...

Utilizing either Maps or Objects in Typescript

I'm in the process of developing a simple Pizza Ordering App. The concept is, you select a pizza from a list and it's added to a summary that groups all the selections together. Here's how I want it to appear: Pizza Margarita 2x Pizza Sala ...

Unresponsive Hover Effect on iPad

I've implemented a hover effect on the menu for my one-page website. When a user hovers over a navigation link on desktop, the color changes to #ed1c28. .nf-navbar .navbar-collapse a:hover { color: #ed1c28; } Additionally, when a user clicks on a ...

Tips for customizing the appearance of a redux-tooltip

After implementing the redux-tooltip from this GitHub repository, I wanted to customize its styling to better align with my application's design. However, I realized that the Tooltip-Component's divs do not have any identifiers or class names, ma ...

"Troubleshooting a dropdown navigation bar problem in CSS

I am currently working on creating a CSS navbar dropdown, but I am encountering some issues. I am not very experienced with CSS, so any assistance would be greatly appreciated. The text within the "Products" box is not changing color like it should, and yo ...

What is the reason behind the content of a div tag not hiding while the content of a p tag does

<html> <head> <title>How to make a div content disappear when clicked?</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <scrip ...

Using special symbols in HTML5 data attributes

Is it feasible to locate all DOM elements using jQuery with wildcard characters in the attribute name? Take into consideration the following HTML code: <input id="val1" type="text" data-validate-required data-validate-minlength ...