Here’s a guide to help you create a responsive Bootstrap 5 Navbar With Center Logo. This tutorial will walk you through the steps to implement a visually appealing and functional navigation bar.
Adding Header Assets
First, include the necessary CSS links in the “ section of your HTML document to utilize Bootstrap, Font Awesome, and custom styles. These links are typically CDN links for easy integration.
<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
Next, create the basic HTML structure for the navbar, including the header, navigation links, logo (centered), and a main content area. This involves using Bootstrap’s grid system and navigation components.
<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
Now add the CSS to customize the navbar’s appearance. This includes styling the header, navigation links, logo, and handling the responsive behavior of the navbar. Specifically, adjust colors, fonts, and layout for different screen sizes.
.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;
}
}
Implementing JavaScript Functionality
Here you’ll add JavaScript to initialize the Headroom.js library, which will make the navbar hide when scrolling down and show when scrolling up. This enhances the user experience by keeping the navigation accessible without taking up screen space.
// grab an element
var myElement = document.querySelector(".header");
// construct an instance of Headroom, passing the element
var headroom = new Headroom(myElement);
// initialise
headroom.init();
Adding Footer Assets
Lastly, add the JavaScript file inclusion at the end of the `body` tag.
That concludes this guide. You should now have a fully functional Bootstrap Navbar With Center Logo implemented on your website.
