Learn how to build a responsive Bootstrap 5 navbar with a topbar for seamless navigation. Follow our web development guide for easy implementation.
Table of Contents
In today's digital landscape, having a user-friendly and visually appealing website is paramount to engaging and retaining visitors. One crucial aspect of website design is the navigation menu, which plays a vital role in helping users find their way around your site. Enter Bootstrap 5 – a cutting-edge CSS framework that empowers web developers to build responsive and dynamic websites with ease.
In this comprehensive blog post, we will guide you through the process of creating a responsive Bootstrap 5 navbar with a topbar, elevating your website's navigation to a whole new level. Whether you are a seasoned developer or a newcomer to web development, our step-by-step approach will help you craft an efficient and aesthetically pleasing navigation system that adapts seamlessly to various screen sizes and devices.
Why Opt for Bootstrap 5 for Your Navbar and Topbar?
- Mobile-First Approach: With an increasing number of users accessing the web from mobile devices, having a mobile-responsive website is crucial. Bootstrap 5 is designed with a mobile-first approach, ensuring your navigation remains functional and attractive on smartphones and tablets.
- Time-Saving and Consistency: Bootstrap 5 provides a vast array of pre-built components and styles, enabling you to save time during development. Additionally, it ensures a consistent design language across your website, creating a professional and polished look.
- Customization Flexibility: While Bootstrap offers ready-to-use components, it also allows extensive customization. Tailor your navbar and topbar to match your website's branding and design requirements seamlessly.
- Community and Support: As one of the most popular CSS frameworks, Bootstrap has a thriving community of developers and enthusiasts. This community provides valuable support, resources, and updates, ensuring you stay updated on the latest web development trends.
What to Expect in this Blog Post
In the following sections, we will delve into each step of creating a responsive Bootstrap 5 navbar with a topbar. From laying the groundwork for the topbar's HTML structure to fine-tuning the appearance and optimizing performance, we've got you covered.
You don't need to be an expert to follow along – we'll explain each concept in a clear and approachable manner, making the learning experience enjoyable for everyone. So, roll up your sleeves, and let's dive into the exciting world of web development with Bootstrap 5!
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our navbar.
After creating the files just paste the following codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Let's break down the code step by step:
1. <!DOCTYPE html>: This is the document type declaration, indicating that the document is an HTML5 document.
2. <html lang="en">: The opening <html> tag indicates the beginning of the HTML document. The lang attribute specifies that the primary language used in the document is English.
3. <head>: The <head> element contains meta-information about the document, such as character encoding, title, keywords, and descriptions. It also includes links to external CSS stylesheets and some external fonts and icons.
4. <meta charset="utf-8">: This meta tag defines the character encoding for the document as UTF-8, which is a widely used character encoding for supporting various characters and symbols from different languages.
5. <title>Bootstrap 5 | Navbar with Topbar</title>: This sets the title of the web page, which will be displayed in the browser's title bar or tab.
6. <meta content="width=device-width, initial-scale=1.0" name="viewport">: This meta tag sets the initial viewport size to the device width, which is essential for responsive web design.
7. <meta content="" name="keywords"> and <meta content="" name="description">: These meta tags are placeholders where you can provide keywords and a brief description of the web page, useful for search engine optimization (SEO).
8. External CSS and Font/Icon Links:
- <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;700;900&display=swap" rel="stylesheet">: This link imports the Google Fonts stylesheet for the Poppins font with different weights.
- <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">: This link imports the Font Awesome icon library's CSS, which provides a collection of scalable icons.
- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">: This link imports the Bootstrap CSS framework version 5.0.2, which provides a set of styles and components for building responsive web applications.
- <link href="styles.css" rel="stylesheet">: This link imports a custom CSS file named "styles.css" from the same directory as the HTML file. It allows you to apply additional custom styles to the page.
9. <body>: The <body> element represents the content of the web page that will be displayed to users.
10. Topbar Section:
- The topbar section contains information like address, working hours, and contact details. It is built using a responsive grid system from Bootstrap.
11. Navbar Section:
- The navbar section is a responsive navigation bar with a logo on the left and menu links on the right. It is implemented using Bootstrap's navbar component.
- The logo is represented by the text "LOGO" in a flex container.
- The hamburger menu button (<button class="navbar-toggler">) is used to toggle the visibility of the navigation links on small screens.
- The navigation links are structured using <a> elements inside a <div class="navbar-nav">.
- There is also a dropdown menu with additional page links implemented using Bootstrap's dropdown component.
12. <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>: This script tag includes Bootstrap's JavaScript bundle, which enables interactive features like dropdowns and collapsible elements on the page.
13. Commented-out Sticky Navbar Script: There is a JavaScript script commented out, which is to implement a sticky navbar functionality using jQuery. It would make the navigation bar stick to the top of the page when scrolling down, but it's currently disabled.
This is the basic structure of our navbar using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the navbar is in place, the next step is to add styling to the navbar using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to style our navbar.
Let's break down the code and explain each part:
1. body: This rule sets the font-family to 'Poppins', a sans-serif font, and if it's not available, it falls back to 'Courier New', 'Courier', or any other monospaced font. The background color of the body is set to a light gray (#ccccd2), and the height is set to 200vh (viewport height).
2. .bg-light: This class is used to set the background color to a very light gray (#f0f0f0) for elements with this class. The !important keyword is used to override any other CSS rules that might target the same element.
3. .btn: This rule applies to elements with the class 'btn' (buttons). It sets the font weight to 500 (medium thickness) and specifies a smooth transition of 0.5 seconds for any CSS property changes.
4. .btn.btn-primary: This rule targets buttons with both 'btn' and 'btn-primary' classes. It sets the text color to white (#FFFFFF), which is typically used for primary action buttons.
5. .btn-sm-square: This rule targets buttons with the class 'btn-sm-square'. It sets the padding to 0, making the button content appear at the edge. The button is displayed as a flex container with centered content (text or icons) and has a fixed width and height of 32px. The font weight is set to normal.
6. .navbar .dropdown-toggle::after: This rule targets the pseudo-element "::after" of the dropdown toggle within the navigation bar. It removes any border, sets the content to a Font Awesome icon code for a specific icon ("\f107"), and styles it using the "Font Awesome 5 Free" font family with a font weight of 900. The icon appears after the dropdown toggle content.
7. .navbar-light .navbar-nav .nav-link: This rule targets the navigation links within the navigation bar when it has the class 'navbar-light'. It sets the margin-right to 30px, padding to 25px on the top and bottom, text color to white (#FFFFFF), font size to 15px, font weight to 500 (medium thickness), and text-transform to uppercase. Additionally, it removes any outline when the link is focused.
8 .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link.active: This rule targets navigation links within the navigation bar on hover and when they have the "active" class. It changes the text color to blue.
9. @media (max-width: 991.98px): This media query targets devices with a maximum width of 991.98px (typically used for mobile or small screens). Within this media query:
- The margin-right is set to 0 and padding to 10px on top and bottom for navigation links.
- A top border of 1px solid #EEEEEE is added to the navbar.
10. .navbar-light .navbar-brand, .navbar-light a.btn: This rule targets the navbar brand element and any anchor link with the 'btn' class when the navbar has the class 'navbar-light'. It sets their height to 75px.
11. .navbar-light .navbar-nav .nav-link: This rule targets navigation links within the navbar when the navbar has the class 'navbar-light'. It sets the text color to black and font weight to 500.
12. .navbar-light.sticky-top: This rule targets the navbar with both 'navbar-light' and 'sticky-top' classes. It sets the top position to -100px, effectively moving the navbar up by 100px, and applies a smooth transition of 0.5 seconds.
13. @media (min-width: 992px): This media query targets devices with a minimum width of 992px (typically used for larger screens or desktops). Within this media query:
- The dropdown menu for navbar items is set to display as a block but is initially hidden with opacity set to 0 and visibility set to hidden.
- When hovering over a navbar item with a dropdown menu, the dropdown menu becomes visible by changing its top position to 100%, opacity to 1, and visibility to visible. The transition is smooth, taking 0.5 seconds to complete.
This will give our navbar an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
body{
font-family: 'Poppins', 'Courier New', Courier, monospace;
background-color: #ccccd2;
height: 200vh;
}
.bg-light{
background-color: #f0f0f0 !important;
}
.btn {
font-weight: 500;
transition: .5s;
}
.btn.btn-primary {
color: #FFFFFF;
}
.btn-sm-square {
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: blue;
}
@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;
}
.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 Output:
See the Pen Untitled by Faraz (@codewithfaraz) on CodePen.
Conclusion:
In conclusion, incorporating a responsive Bootstrap 5 navbar with a topbar into your website is a fantastic way to elevate user experience and ensure seamless navigation across different devices. By following the step-by-step guide and leveraging Bootstrap's powerful features, you can create a visually appealing and efficient navigation system.
With a well-designed topbar and customized navbar, your website will not only look professional but also offer enhanced usability to your visitors. Remember to test your navigation menu thoroughly to ensure it works flawlessly on various browsers and devices.
Embrace the potential of Bootstrap 5, and take your web development skills to new heights. With this implementation, your users will enjoy a user-friendly and mobile-responsive navigation experience, making them more likely to stay engaged with your website. Happy coding and best of luck with your web development endeavors!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
