Here’s a tutorial that will guide you through the process of creating a Bootstrap 5 Navbar With Center Logo. This design pattern is very common and useful for modern websites.
Adding Header Assets
This section covers the necessary CSS and meta tags required for the basic setup.
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><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'>
Creating the HTML Structure
Here’s where we build the actual structure of the navbar, including the logo and menu items. Make sure to pay attention to the classes used for proper Bootstrap styling.
<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="https://www.badiali.es">
Luis <span class="fw-bold">Badiali</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>
Styling with CSS
The following CSS code will style the components. Feel free to customize these styles to fit your website’s design.
.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;
}
}
Adding Javascript Functionality
// grab an element
var myElement = document.querySelector(".header");
// construct an instance of Headroom, passing the element
var headroom = new Headroom(myElement);
// initialise
headroom.init();
You should now have a functional Bootstrap 5 Navbar with a centered logo.
