Bootstrap - Headers Demo

Ethan D. -

Bootstrap Headers

Bootstrap headers are navigation components from the Bootstrap framework. These headers give a consistent and professional look to your website's top navigation. You can customize them to match your website's design.

Creating a Basic Header

A basic Bootstrap header has a <nav> element with the class .navbar and a container element inside it. The container holds the header content, such as a logo and navigation links.

Example: Simple Bootstrap header with logo and navigation

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Logo</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

  1. The <nav> element has the class .navbar to define it as a Bootstrap navbar. It also has the classes .navbar-expand-lg to make it responsive and .navbar-light and .bg-light to set its color scheme.

  2. Inside the <nav>, there's a <div> with the class .container to center the header content and add padding.

  3. The .navbar-brand class is used on an <a> element to create a logo or brand name. Replace "Logo" with your actual logo image or text.

  4. The .navbar-toggler button is used to toggle the navigation menu on small screens. It's associated with the .collapse element using the data-bs-target attribute.

  5. The .collapse.navbar-collapse div contains the navigation menu items. It has an id that matches the data-bs-target attribute of the toggler button.

  6. The navigation items are placed inside a <ul> element with the class .navbar-nav. Each <li> item has the class .nav-item, and the <a> elements inside them have the class .nav-link.

This code creates a basic header with a logo on the left and a navigation menu on the right. The navigation menu collapses into a toggle button on small screens.

You can customize the header further by adding your own logo image, changing the color scheme, or modifying the navigation items to fit your website's structure.

Header Variations

Bootstrap provides header variations that you can use to create different types of headers for your website. These variations include fixed headers, sticky headers, headers with dropdown menus, and transparent headers.

Fixed Headers

Fixed headers stay at the top of the page, even when the user scrolls down. This makes the navigation easy to find at all times. To create a fixed header, add the .fixed-top class to the <nav> element:

Example: Fixed Header

<nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
  <!-- Header content -->
</nav>
body {
  padding-top: 56px; /* Adjust this value based on your header's height */
}

The .fixed-top class puts the header at the top of the viewport and gives it a fixed position. Keep in mind that fixed headers may overlap page content, so you should add some padding to the <body> element to prevent this.

Sticky Headers

Sticky headers become fixed when the user scrolls past them. This allows the header to be first positioned within the page flow and then "stick" to the top of the viewport when scrolled past. To create a sticky header, add the .sticky-top class to the <nav> element:

Example: Sticky Header

<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
  <!-- Header content -->
</nav>

The .sticky-top class uses CSS's position: sticky to do this. Note that sticky positioning may not work in some older browsers.

Headers with Dropdown Menus

You can add dropdown menus to your header to organize navigation items into categories. To create a dropdown menu, add the .dropdown class to a <li> element and nest the dropdown items inside it:

Example: Header with Dropdown Menu

<ul class="navbar-nav">
  <!-- Regular navigation items -->
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
      Dropdown
    </a>
    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
      <li><a class="dropdown-item" href="#">Action</a></li>
      <li><a class="dropdown-item" href="#">Another action</a></li>
      <li><hr class="dropdown-divider"></li>
      <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>
  </li>
</ul>

The .dropdown-toggle class on the <a> element creates a toggle button for the dropdown. The .dropdown-menu class is used on the <ul> element that contains the dropdown items. Each dropdown item is an <li> element with the .dropdown-item class applied to the <a> element inside it.

Transparent Headers

Transparent headers overlay page content and have a see-through background. They are often used on landing pages or hero sections to create a more immersive experience. To create a transparent header, remove the background color classes (e.g., .bg-light) and add the .bg-transparent class to the <nav> element:

Example: Transparent Header

<nav class="navbar navbar-expand-lg navbar-dark bg-transparent">
  <!-- Header content -->
</nav>

The .navbar-dark class is used to make sure that the navigation items are visible on a transparent background. You may need to change the text color and other styles to ensure proper visibility and readability.

These are just a few of the header variations you can create with Bootstrap. By combining these variations and customizing the styles, you can create headers that fit your website's design and requirements.

Customizing Headers

You may want to customize Bootstrap headers to match your website's design. You can achieve this by modifying the header's CSS styles.

To customize a Bootstrap header, target the header elements using CSS selectors and apply your desired styles. Here are some common customizations:

  1. Changing header background color:
    • Use Bootstrap's .bg-* classes to change the header's background color, such as .bg-primary, .bg-secondary, .bg-dark, etc.
    • To use a custom color, override the default background color using CSS:

Example: Changing header background color using inline CSS

<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
  <!-- Header content -->
</nav>

Or, create a custom CSS class:

Example: Changing header background color using a custom CSS class

.custom-header {
  background-color: #e3f2fd;
}

And apply it to the <nav> element:

<nav class="navbar navbar-expand-lg navbar-light custom-header">
  <!-- Header content -->
</nav>
  1. Changing header text color:
    • Use .navbar-light or .navbar-dark classes to set the header's text color based on the background color.
    • For custom text colors, use CSS to target the navigation items:

Example: Changing header text color using CSS

.navbar-nav .nav-link {
  color: #333;
}
  1. Changing header font:
    • To change the header's font, target the relevant elements and apply the desired font styles:

Example: Changing header font using CSS

.navbar-brand, .navbar-nav .nav-link {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}
  1. Adjusting header spacing:
    • Bootstrap's .navbar class applies default padding to the header. To adjust the spacing, use CSS to modify the padding:

Example: Adjusting header spacing using CSS

.navbar {
  padding: 1rem 1.5rem;
}
  • Adjust the spacing between navigation items by targeting the .nav-link class:

Example: Adjusting navigation item spacing using CSS

.navbar-nav .nav-link {
  padding: 0.5rem 1rem;
}

Place your custom CSS code after the Bootstrap CSS file to make sure your styles override the default Bootstrap styles.

Responsive Headers

Bootstrap headers adapt to different screen sizes and devices. This provides a good user experience across desktop and mobile platforms.

Bootstrap headers use the .navbar-expand-* classes to determine at which breakpoint the header should collapse into a mobile-friendly version.

Header Example

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <!-- Header content -->
</nav>

When the header collapses, the navigation items are hidden and replaced by a toggle button. Clicking the toggle button shows the navigation items in a vertical layout.

Example: Adjusting Logo Size

.navbar-brand img {
  height: 30px; /* Adjust this value based on your logo size */
}

@media (max-width: 991px) {
  .navbar-brand img {
    height: 24px; /* Reduce logo size on smaller screens */
  }
}

Tip: Use Scrollable Mobile Menu

If your header has a lot of navigation items, consider using a scrollable mobile menu to avoid a long list of items.

Example: Scrollable Mobile Menu

@media (max-width: 991px) {
  .navbar-collapse {
    max-height: 300px; /* Adjust this value based on your needs */
    overflow-y: auto;
  }
}