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/bootstrap@5.2.1/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/bootstrap@5.2.1/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.
Similar Code Snippets:
- Bootstrap 5 Password Strength Meter
- Summernote Editor Compatible With Bootstrap 5
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.