Bootstrap 5 Navbar with Center Logo

This code implements a Bootstrap 5 navbar with a center logo. It utilizes HTML and CSS to achieve this layout. It’s helpful for creating a stylish and functional navigation bar for websites. You can integrate this navbar template into personal portfolios, business websites, blogs, e-commerce sites, landing pages, and any website requiring a centered logo in its navigation.

How to Create Bootstrap 5 Navbar With Center Logo

1. First of all, load the Bootstrap 5, and Font Awesome CSS by adding the following CDN links into the head tag of your HTML document.

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css'>
<link rel='stylesheet' href='https://codepen.io/badiali/pen/Vwxmzrg.css'>

2. Create the HTML structure for the navbar as follows. Replace the “Your Brand” with your logo. Likewise, insert your navigation links within the <div class="container-lg"> element located in the Offcanvas Navigation Menu section. Lastly, include your website’s content within the <main class="main"> section.

<header data-headroom class="header fixed-top">
  <nav class="navbar navbar-expand-lg text-uppercase py-0">
    <a class="navbar-brand d-lg-none py-0 ms-4 me-0" href="#">
     <span class="fw-bold">Your Brand</span>
    </a>
    <div class="offcanvas offcanvas-end vh-100" tabindex="-1" id="navbarOffcanvasLg" aria-labelledby="navbarOffcanvasLgLabel">
      <div class="container-lg">
        <div class="row flex-grow-1 p-4 p-lg-0">
          <div class="d-flex d-lg-block col-lg-4 order-1 order-lg-2 text-lg-center">
            <button type="button" class="d-lg-none border-0 bg-transparent p-0 ms-auto" data-bs-dismiss="offcanvas" aria-label="Cerrar">
              <i class="fa-solid fa-close"></i>
            </button>
            <a class="navbar-brand d-none d-lg-block py-0 me-0" href="https://www.badiali.es">
              Luis <span class="fw-bold">Badiali</span>
            </a>
          </div>
          <div class="col-lg-4 order-2 order-lg-1 ms-auto ms-lg-0">
            <ul class="navbar-nav d-flex flex-column flex-lg-row">
              <li class="nav-item me-4 me-xxl-5">
                <a class="nav-link" href="https://www.linkedin.com/in/badiali/">Sobre mi</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="https://codepen.io/badiali">Portfolio</a>
              </li>
            </ul>
          </div>
          <div class="col-lg-4 order-3">
            <ul class="navbar-nav d-flex flex-column flex-lg-row justify-content-lg-end">
              <li class="nav-item me-4 me-xxl-5">
                <a class="nav-link" href="https://dev.to/badiali">Blog</a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="https://www.badiali.es">Contacto</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </nav>
  <button class="navbar-toggler d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarOffcanvasLg" aria-controls="navbarOffcanvasLg">
    <i class="fa-solid fa-bars"></i>
  </button>
</header>
<main class="main">
  <figure class="cover-image position-relative w-100 vh-100 d-flex align-items-center justify-content-center mb-0">
    <figcaption class="cover-image__title position-relative text-center px-3 px-md-0">
      <h1 class="display-1 text-uppercase fw-semibold mb-4">
        Diseño UI/UX<br>
        Web Dev
      </h1>
      <p class="lead text-center mb-5">
        Hola 👋 soy Luis Badiali <br>
        Me dedico al diseño UI/UX y desarrollo frontend<br>
        Apasionado del mar, la vela y el arte.
      </p>
      <a class="btn btn-sm btn-dark text-uppercase px-4 py-3 rounded-0" href="https://www.badiali.es">Contactar</a>
    </figcaption>
    <div class="mouse position-absolute">
      <div class="mouse-scroll position-relative bg-white"></div>
    </div>
  </figure>
  <section class="container py-5">
    <h2 class="text-uppercase mb-4">
      Lorem ipsum <strong>dolor sit amet</strong>
      <small class="d-block text-muted">Doloribus fuga totam quis</small>
    </h2>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Est ut soluta culpa natus error totam. Doloribus fuga totam quis harum deleniti aspernatur, amet odio voluptatibus in reprehenderit ducimus nostrum ut!</p>
  </section>
</main>

3. Style the navbar using the following CSS code. You can modify the CSS rules to customize the navbar according to your needs.

.header {
  padding-top: 1.8rem;
  padding-bottom: 1.8rem;
}
.header .nav-link,
.header .navbar-brand,
.header .navbar-toggler i {
  color: white;
  transition: color 0.2s linear;
}
.header .nav-link:hover,
.header .navbar-brand:hover,
.header .navbar-toggler i:hover {
  color: mediumpurple;
}
.header .navbar-brand {
  font-size: 1.8rem;
}
.header .navbar-toggler {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 2rem;
}
.header .navbar-toggler i {
  font-size: 1.5rem;
}
.header.headroom {
  transition: all 0.2s linear;
}
.header.headroom--top, .header.headroom--top.headroom--pinned {
  background-color: transparent;
}
.header.headroom--not-top.headroom--pinned {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  background-color: rgba(255, 255, 255, 0.9);
}
.header.headroom--not-top.headroom--pinned .nav-link,
.header.headroom--not-top.headroom--pinned .navbar-brand,
.header.headroom--not-top.headroom--pinned .navbar-toggler i {
  color: black;
}
.header.headroom--pinned {
  transform: translateY(0%);
}
.header.headroom--unpinned {
  transform: translateY(-100%);
}

.offcanvas .fa-close {
  font-size: 1.8rem;
}
.offcanvas.show .row {
  padding-top: 2rem !important;
}
.offcanvas.show .nav-link {
  color: black;
}

.cover-image {
  min-height: 600px;
  color: white;
  background: url("https://bit.ly/3Rj3yMN") no-repeat center;
  background-size: cover;
}
.cover-image__title {
  text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.3);
  z-index: 1;
}
.cover-image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: black;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 30%);
}

@media (max-width: 767px) {
  p.lead {
    font-size: 1rem;
  }
}
@media (min-width: 1200px) {
  [class*=container] {
    max-width: 1000px;
  }
}
.mouse {
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 47px;
  border: 2px solid white;
  border-radius: 14px;
}
.mouse .mouse-scroll {
  top: 10px;
  left: 11px;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  -webkit-animation: mouse 1.5s ease-out infinite;
          animation: mouse 1.5s ease-out infinite;
}

@-webkit-keyframes mouse {
  0% {
    top: 4px;
    opacity: 0;
    height: 4px;
  }
  50% {
    top: 8px;
    opacity: 1;
    height: 10px;
  }
  to {
    top: 12px;
    opacity: 0;
    height: 4px;
  }
}

4. Load the Bootstrap and Headroom JS by adding the following scripts just before closing the body tag:

<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js'></script>
<script src='https://unpkg.com/headroom.js/dist/headroom.min.js'></script>
<script src='https://codepen.io/badiali/pen/Vwxmzrg.js'></script>

5. Finally, add the following JavaScript function between <script> tag to functionalize the navbar on scroll view:

// grab an element
var myElement = document.querySelector(".header");
// construct an instance of Headroom, passing the element
var headroom  = new Headroom(myElement);
// initialise
headroom.init();

That’s all! hopefully, you have successfully created a navbar with a center logo. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.