In the current digital environment, having an accessible and visually engaging website is essential for capturing and holding the attention of visitors. A key element of web design is the navigation menu, which is crucial for assisting users in navigating your site. Enter Bootstrap 5 – an innovative CSS framework that allows web developers to create responsive and dynamic website with simplicity.
In this detailed article, we will walk you through the steps of building a responsive Bootstrap 5 navigation bar featuring with topbar, enhancing your website’s navigation experience. Whether you are an experienced developer or just starting in web development, our methodical approach will guide you in designing an effective and visually appealing navigation process that adjusts effortlessly to different screen sizes and devices.
Reasons to choose Bootstrap 5 for your Navbar and Topbar
- Mobile-first Strategy: As more users browse the internet on mobile devices, having a website that is mobile-responsive is essential. Bootstrap 5 is built with a mobile-first strategy, guaranteeing that your navigation is both functional and visually appealing on smartphones and tablets.
- Efficiency and Uniformity: Bootstrap 5 comes with a wide-selection of pre-designed components and styles, allowing you to expedite your development process. Moreover, it maintains a consistent design language throughout your website, giving it professional and refined appearance.
- Community and Assistance: As one of the leading CSS frameworks, Bootstrap boasts a vibrant community of developers and enthusiasts. This community offers valuable assistance, resources, and updates, keeping you informed about the latest trends in web development.
- Customization Options: Although Bootstrap provides ready-made components, it also offers significant customization opportunities. You can adjust your navbar and topbar to align perfectly with your website’s branding and design specification.
- Step 1 : HTML CODE
To begin, we will first create a HTML file. In this file, we will incorporate the primary layout for our navigation bar.
Once you have created the file, simply copy and paste the following code into your document. Ensure that you save your HTML file with a .html extension, allowing it to be correctly displayed in a web browser.
We also include script tag, it contains Bootstrap’s JavaScript bundle, which activates interactive functionalities such as dropdown and collapsible components on the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bootstrap 5 Navigationbar with Topbar | Coding Jasim</title>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<meta content="" name="keywords">
<meta content="" name="description">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;700;900&display=swap" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="styles.css" rel="stylesheet">
</head>
<body>
<!-- Topbar Start -->
<div class="container-fluid bg-light p-0">
<div class="row gx-0 d-none d-lg-flex">
<div class="col-lg-7 px-5 text-start">
<div class="h-100 d-inline-flex align-items-center py-3 me-4">
<small class="fa fa-map-marker-alt text-primary me-2"></small>
<small>ABC Appartment,II Cross, Chennai India</small>
</div>
<div class="h-100 d-inline-flex align-items-center py-3">
<small class="far fa-clock text-primary me-2"></small>
<small>Mon - Sat: 10:30 AM - 08:00 PM</small>
</div>
</div>
<div class="col-lg-5 px-5 text-end">
<div class="h-100 d-inline-flex align-items-center py-3 me-4">
<small class="fa fa-phone-alt text-primary me-2"></small>
<small>+91 77770 00XXX</small>
</div>
<div class="h-100 d-inline-flex align-items-center">
<a class="btn btn-square-sm bg-white text-primary me-1" href=""><i class="fab fa-facebook-f"></i></a>
<a class="btn btn-square-sm bg-white text-primary me-1" href=""><i class="fab fa-twitter"></i></a>
<a class="btn btn-square-sm bg-white text-primary me-1" href=""><i class="fab fa-linkedin-in"></i></a>
<a class="btn btn-square-sm bg-white text-primary me-0" href=""><i class="fab fa-instagram"></i></a>
</div>
</div>
</div>
</div>
<!-- Topbar End -->
<!-- Navbar Start -->
<nav class="navbar navbar-expand-lg bg-white navbar-light sticky-top p-0">
<a href="index.html" class="navbar-brand d-flex align-items-center px-4 px-lg-5">
<h2 class="m-0 text-primary">BRAND NAME</h2>
</a>
<button type="button" class="navbar-toggler me-4" data-bs-toggle="collapse" data-bs-target="#navbarCollapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<div class="navbar-nav ms-auto p-4 p-lg-0">
<a href="#" class="nav-item nav-link active">Home</a>
<a href="#" class="nav-item nav-link">Order Online</a>
<a href="#" class="nav-item nav-link">Recipes</a>
<a href="#" class="nav-item nav-link">Find a Store</a>
<div class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">DINING</a>
<div class="dropdown-menu fade-up m-0">
<a href="#" class="dropdown-item">Breakfast</a>
<a href="#" class="dropdown-item">Lunch</a>
<a href="#" class="dropdown-item">Dinner</a>
<a href="#" class="dropdown-item">Seasonal</a>
</div>
</div>
<a href="#" class="nav-item nav-link">Contact</a>
</div>
<a href="#" class="btn btn-primary py-4 px-lg-5 d-none d-lg-block">Book Now<i class="fa fa-arrow-right ms-3"></i></a>
</div>
</nav>
<!-- Navbar End -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>- Step 2 : CSS CODE
After establishing the fundamental HTML layout of the navbar, the subsequent step involves applying CSS styling to it. For that you have to create CSS file named styles.css and insert the provided codes into your CSS file. Keep in mind that the file must have a .css extension.
body{
font-family: 'Poppins', 'Courier New', Courier, monospace;
background-color: #c8dcdb;
height: 200vh;
}
.bg-light{
background-color: #1a0606 !important;
}
.h-100 {
color: white;
}
.btn {
font-weight: 500;
transition: .5s;
}
.btn.btn-primary {
color: #FFFFFF;
}
.btn-square-sm {
padding: 0;
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
font-weight: normal;
}
.navbar .dropdown-toggle::after {
border: none;
content: "\f107";
font-family: "Font Awesome 5 Free";
font-weight: 900;
vertical-align: middle;
margin-left: 8px;
}
.navbar-light .navbar-nav .nav-link {
margin-right: 30px;
padding: 25px 0;
color: #FFFFFF;
font-size: 15px;
font-weight: 500;
text-transform: uppercase;
outline: none;
}
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
color: rgb(238, 6, 203);
}
@media (max-width: 991.98px) {
.navbar-light .navbar-nav .nav-link {
margin-right: 0;
padding: 10px 0;
}
.navbar-light .navbar-nav {
border-top: 1px solid #EEEEEE;
}
}
.navbar-light .navbar-brand,
.navbar-light a.btn {
height: 75px;
}
.a.btn-primary{
height: 50px;
}
.navbar-light .navbar-nav .nav-link {
color: black;
font-weight: 500;
}
.navbar-light.sticky-top {
top: -100px;
transition: .5s;
}
@media (min-width: 992px) {
.navbar .nav-item .dropdown-menu {
display: block;
border: none;
margin-top: 0;
top: 150%;
opacity: 0;
visibility: hidden;
transition: .5s;
}
.navbar .nav-item:hover .dropdown-menu {
top: 100%;
visibility: visible;
transition: .5s;
opacity: 1;
}
}Final Thoughts
To sum up, integrating a responsive Bootstrap 5 navigation bar with a topbar into your website is an excellent method to improve user experience and guarantee smooth navigation across various devices. By adhering to the step-by-step instruction and utilizing Bootstrap’s robust features, you can establish an attractive and efficient navigation system.
With a thoughtfully crafted topbar and tailored navigation bar, your website will not only appear professional but also provide better usability for your visitors. Be to sure to rigorously test your navigation menu to confirm its flawless operation on different browsers and devices.
Harness the capabilities of Bootstrap 5, and elevate you web development expertise. With this implementation, your users will benefit from a user-friendly and mobile-responsive navigation experience, increasing their likelihood of remaining engaged with you site. Best wishes and happy coding in your web development projects!