How to Freeze bottom of Header in React/CSS

In this post, we will go over the process to:

1. Create a header (which includes Navigation Bar) in React

2. Update CSS to freeze navigation bar

3. Specify CSS formatting to ensure the remainder of header is able to minimize on scroll

The specifications on creating a functioning Navigation bar in React is not covered in this post. For details on how to create a NavBar component, check out the following resources:

1. Creating a Navbar in React

2. Create a basic Navbar using React Router v6

Dependencies

The following packages will need to be installed:

• react-dom (v18.3.1 was used in this example)

• react-headroom (v3.2.1 was used in this example)

    "react-dom": "^18.3.1",
    "react-router-dom": "^6.14.2",
    "react-scripts": "5.0.1",
    "react-headroom": "3.2.1",

React Components

Include the following components in React:

1. App

2. Header

3. NavBar

Include the following within the App component:

• Headroom wrapper

  • Built-in React component used for Headers

  • The header hides when the user scrolls down, minimizing distraction

  • The header reappears when the user scrolls up, ensuring easy access to navigation

• Header component

import Headroom from "react-headroom"
import { Outlet } from "react-router-dom";
import Header from "./components/Header";

function App(){

    return(
        <>
            <Headroom>
                <Header />
            </Headroom>
            <Outlet/>
        </>
    );
};

export default App;

Include the following in the Header component:

• Main header content (will be minimized upon scroll)

• NavBar component (will be frozen upon scroll)

import React from 'react';
import NavBar from "./NavBar"

const Header = () => {
    return (
        <header>
            <h2>This is a Header!</h2>
            <NavBar />
        </header>
    );
}

export default Header;

Include the following in the NavBar component:

• class name of “nav-bar”

As mentioned previously, the specifications on creating a NavBar component are outside of the scope of this post. There is more than one method to making a NavBar (i.e. <a> tags, routing) , and as long as the setup of the components matches what we have covered so far, and the main container has a class name of “nav-bar”, any method will work for our purposes.

import { NavLink } from "react-router-dom";

function NavBar() {
  return (
    <nav class="nav-bar">
      <NavLink
        to="/"
        className="nav-link"
      >
        Home
      </NavLink>
      <NavLink
        to="/about"
        className="nav-link"
      >
        About
      </NavLink>
      <NavLink
        to="/projects"
        className="nav-link"
      >
        Projects
      </NavLink>
    </nav>
  );
};

export default NavBar;

CSS

Include the following styles:

• For header:

  • Specify desired styles for top section of header (everything aside from navigation bar)

• For nav-bar:

  • Specify desired styling

  • Set position to ‘fixed’ to ensure navigation bar will stay frozen on scroll

• For header children elements

  • Set margin-bottom to 0 to remove space between the navigation bar and the remainder of the header

• For element following headroom-wrapper

  • Adjust the padding-top of the element immediately following the headroom-wrapper to push down the main content

  • This will ensure the content of the page is not hidden by the header

header {
  align-items: center;
  background-color: black;
  color: white;
}

header, .nav-bar {
  width: 100%;
}

/* fix navigation bar on scroll */
.nav-bar {
  position: fixed;
  background-color: var(--green);
}

/* include to remove unwanted space between main header and nav */
header * {
  margin-bottom: 0;
}

/* adjust based on the height of the header */
.headroom-wrapper + * {
  padding-top: 25px;
}

Result

Once these items are updated, you should be able to see the top of the header minimize on scroll, while the Navigation Bar stays at the top of the page!

Before Scroll…

After Scroll…