How to Create a Sticky Header Using Css

We can create a sticky header using CSS by following the steps below:

1. Define up the HTML structure: Create the HTML structure for the header, including the navigation menu or any other content you want to include.

Html

 <header class="main-header">
      <!-- Add your header content here -->
      <div class="links-container">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Mission</a>
        <a href="#">Locate</a>
        <a href="#">Contact</a>
      </div>
    </header>

2. Add CSS styles: Apply CSS styles to make the header sticky.

Css

.main-header {
      position: sticky;
      top: 0;
      width: 100;
      height: 50px;
      border-bottom: 2px solid peru;
      background-color: antiquewhite;
      padding-top: 20px;
      /* Add additional styles as needed */
    }
    .links-container {
      font-size: 1.2rem;
      /* width: 30%; */
      float: right;
      display: flex;
      margin-right: 1rem;
      justify-content: space-between;
    }
    .links-container a {
      color: orangered;
      text-decoration: none;
      font-weight: 700;
      margin-right: 8px;
    }

    /* **** Responsive***** */

    @media screen and (max-width: 400px) {
      .links-container {
        width: 70%;
        font-size: 0.8rem;
        margin-right: 4px;
      }
    }

In this example, the .main-header selector is use to target the header in CSS and set the position property value to sticky, which makes the header stick to the top of the viewport as the user scrolls.

The top: 0 property ensures that the header remains fixed at the top.

You can customize the styles by adding/removing some properties such as background color, height, padding, and other visual enhancements.

3. Adjust the content below the header (optional): If you have content after the header, you may need to add some additional CSS to prevent it from overlapping with the sticky header. One common approach is to add padding or margin to the content element.

Let’s take an example where there are content after the header

New Html

<header class="main-header">
      <!-- Add your header content here -->
      <div class="links-container">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Mission</a>
        <a href="#">Locate</a>
        <a href="#">Contact</a>
      </div>
    </header>
    <div class="content">
      <h2>Main Contents</h2>
      <p>The content that comes next after the header</p>
    </div>

New CSS
	* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
/* This styles are added to remove any pre-existing margin and padding */
   
.main-header {
      position: sticky;
      top: 0;
      width: 100;
      height: 50px;
      border-bottom: 2px solid peru;
      background-color: antiquewhite;
      padding-top: 20px;
      /* Add additional styles as needed */
    }
    .links-container {
      font-size: 1.2rem;
      /* width: 30%; */
      float: right;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      margin-right: 1rem;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
       justify-content: space-between;
    }
    .links-container a {
      color: orangered;
      text-decoration: none;
      font-weight: 700;
      margin-right: 8px;
    }
.content {
 /* padding-top: 50px; */ 
  /* Adjust the value to match the height of the sticky header. You can also add additional styles as needed */
}

    /* **** ***** */

    @media screen and (max-width: 400px) {
      .links-container {
        width: 70%;
        font-size: 0.8rem;
        margin-right: 4px;
      }
    }

Result

In this example, the .content selector is used to target the immediate content that comes after the header.

In order to add some sort of distance to the top, the result may vary across different browsers, as you can see on my browser, I did not add any padding or margin and it works just fine. You can always adjust the value according to the height of your sticky header to prevent overlapping.

By following these steps, you can create a sticky header using CSS. The header will remain fixed at the top of the viewport as the user scrolls, providing a persistent navigation or header section on your webpage.