Customizing Bootstrap NavBar Collapse: Left to Right, Full Height, & More

Bootstrap’s NavBar sizing and transition can be customized with a little CSS knowledge. In this tutorial I will make the NavBar use the full screen height and have the content open left to right.

Here’s a screenshot of what we will build:

Here is a link to the Bootstrap NavBar Docs. I will be using react-bootstrap in this tutorial, but these examples apply to vanilla Bootstrap as well.

Full code for this tutorial is in the Resources section.

Bootstrap NavBar Collapse Full Height

The Bootstrap NavBar and its subcomponents are created by adding classes to HTML elements. The NavBar is simply a nav element with Bootstrap’s navbar class applied to it.

We might want the NavBar to take full height on a small screen, like an iPhone. We can make the navbar use the full available height by adding CSS to the NavBar component. However, we only want to add the height styling if the NavBar is ‘open’.

I used a React useState hook to track whether the NavBar was open.

const [isOpen, setIsOpen] = React.useState(false);

This is toggled when the ‘hamburger’ menu button is clicked:

<button onClick={() => setIsOpen(!isOpen)}

We can use the isOpen state to dynamically apply and remove a CSS class to control height:

<nav className={`${isOpen ? "navbar-full-height" : ""} />

Inside the navbar-full-height class, add the following CSS:

.navbar-full-height {
  height: 100vh;
  align-items: flex-start;
}

To create a full height Bootstrap NavBar, add height: 100vh. This sets height to 100% of the viewport. We will also need align-items: flex-start. This forces the content to the top of the screen. If you don’t add flex-start, then the default Bootstrap NavBar styling forces the items to the vertical center:

If you keep the dropdown in the navbar you can customize the hover color.

Bootstrap NavBar Expand From Left To Right

We can create a horizontal collapse animation on the Bootstrap NavBar with some CSS and knowledge of the NavBar subcomponents.

The “Collapse” component is simply a div with the collapse and navbar-collapse Bootstrap classes applied. This is where we want to add some classes to create the left-to-right collapse and expand transition.

We will add three classes: show, open-nav, and closed-nav. The show class is a Bootstrap class that needs to be added to remove the display: none that exists by default when the collapse subcomponent is ‘closed’ on small screens. Alternatively, if you are using jQuery then the data-bs-toggle="collapse" will handle this for you.

<div className={`${isOpen ? "open-nav" : "closed-nav"} show collapse  navbar-collapse`} />

Inside of open-nav we need to control the styling of the collapse content when the NavBar is in an open state.

.open-nav {
  background-color: wheat;
  padding: 4px;
  border-radius: 2px;
  margin-top: 8px;
}

If you use padding like I did, then it needs to be conditionally applied like my open-nav class. Otherwise you have a little visible content area even when the NavBar is supposed to be closed. The rest of the styling in this class does not need to be conditional.

Inside of closed-nav we control the visibility of the NavBar:

.closed-nav {

  height: 0px !important;
  flex-basis: 0;
  flex-grow: 0;
  overflow: auto;
}

It is important to set the height to 0px or else the NavBar is too tall even when it is closed (remember, we removed display: none).

Next, we control the width using flex-basis and flex-grow. We do this because when the Collapse is open, Bootstrap controls its width with flex-basis and flex-grow. For our transition to work, we need to use the same properties.

Finally, the overflow: auto makes sure the Collapse contents are hidden when we remove their height and flex-basis.

The final styling we need is to add transition to the existing collapse class. We can enhance Bootstrap classes in our .scss file:

.collapse {
  transition: flex-basis 0.5s, flex-grow 0.5s;
}

This creates the left-to-right opening animation that we desired.

Resources

Here’s how to customize Bootstrap NavBar text color and background color.

//NavBarCustomCollapse.scss

@import "bootstrap/scss/bootstrap";

.navbar-full-height {
  height: 100vh;
  align-items: flex-start;
}

.collapse {
  transition: flex-basis 0.5s, flex-grow 0.5s;
}

.open-nav {
  background-color: wheat;
  padding: 4px;
  border-radius: 2px;
  margin-top: 8px;
}

.closed-nav {
  height: 0px !important;
  flex-basis: 0;
  flex-grow: 0;
  overflow: auto;
}

//NavBarCustomCollapse.tsx

import React from "react";
import "./NavBarCustomCollapse.scss";

export default function NavBarCustomCollapse() {
  const [isOpen, setIsOpen] = React.useState(false);
  return (
    <nav className={`${isOpen ? "navbar-full-height" : ""} navbar navbar-expand-md navbar-light bg-secondary navbar-fixed-width`} >
      <div className="container-fluid">
        <div style={{ flexBasis: "100%", display: "flex", flexWrap: "inherit", alignItems: "center", justifyContent: "space-between" }}>
          <a className="navbar-brand" href="#">Navbar</a>
          <button onClick={() => setIsOpen(!isOpen)} className="navbar-toggler" type="button" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span className="navbar-toggler-icon"></span>
          </button>
        </div>
        <div className={`${isOpen ? "open-nav" : "closed-nav"} show collapse  navbar-collapse`} id="navbarSupportedContent">
          <ul className="navbar-nav me-auto mb-2 mb-lg-0">
            <li className="nav-item">
              <a className="nav-link active" aria-current="page" href="#">Home</a>
            </li>
            <li className="nav-item">
              <a className="nav-link" href="#">Link</a>
            </li>
          </ul>
          <form className="d-flex">
            <input className="form-control me-2" type="search" placeholder="Search" aria-label="Search" />
            <button className="btn btn-outline-success" type="submit">Search</button>
          </form>
        </div>
      </div>
    </nav >
  );
}