Bootstrap 5 Navbar with Center Logo

Bootstrap 5 Navbar with Center Logo
Code Snippet:Centered logo navbar Bootstrap 5
Author: Luis Badiali
Published: September 23, 2023
Last Updated: September 24, 2023
Downloads: 916
License: MIT
Edit Code online: View on CodePen
Read More

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X