Discover how to use Bootstrap 5 with HTML, CSS, and JavaScript to create latest responsive Navigation bar in a few easy steps which is ideal for those new to web development.
Before you started, look into the Responsive DEMO of this project.
An essential component of any website is a Navigation bar. It facilitates rapid and simple page switching for users. This blog will teach you how to use HTML, CSS (Bootstrap 5), and JavaScript to construct a responsive and latest navigation bar.
Before you begin the tutorial, make sure you have these abilities:
- Basic knowledge of HTML, CSS, and JavaScript
- VS Code or another code editor
- Using Bootstrap 5 CDN required with an internet connection
- A latest web browser, such as Chrome
- HTML CODE
To begin, we must first set up a HTML document. Within this file, we will outline the primary layout for our latest navigation bar.Â
And also we include Scripts at the bottom:
- Bootstrap JS Bundle: Facilitates the toggling of the navbar and various interactive features.
- scripts.js: Custom JavaScript to handle dynamic functionalities (such as visibility for login/logout).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Latest Navbar - HTML CSS & JS | Coding Jasim</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"/>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-custom">
<div class="container-fluid">
<a class="brand-navbar" href="#"><i class="fa-solid fa-code me-3"></i>Coding Jasim</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<div class="search-form-wrapper mx-lg-auto my-2 my-lg-0">
<div class="d-flex flex-column flex-lg-row align-items-center w-100" style="max-width: 600px;">
<form class="search-form flex-grow-1 me-lg-2" role="search">
<input class="form-control" type="search" placeholder="Search web developments, keywords, scripting..." aria-label="Search">
<button class="btn btn-search" type="submit">
<i class="fa-solid fa-magnifying-glass"></i>
</button>
</form>
<a href="#" class="advanced-search-link mt-2 mt-lg-0">Advanced Search</a>
</div>
</div>
<ul class="navbar-nav ms-lg-auto mb-2 mb-lg-0">
<li class="nav-item" id="nav-Login">
<button type="button" class="btn btn-login">
<i class="fa-solid fa-arrow-right-to-bracket"></i>Login
</button>
</li>
<li class="nav-item" id="navZeroFeeRegistration">
<button type="button" class="btn btn-free-registration">
<i class="fa-solid fa-address-card"></i>Zero-fee Registration
</button>
</li>
<li class="nav-item" id="nav-Subscribe">
<button type="button" class="btn btn-subscribe">
<i class="fa-solid fa-thumbs-up"></i>Subscribe
</button>
</li>
<li class="nav-item d-none" id="nav-MyAccount">
<button type="button" class="btn btn-my-account">
<i class="fa-solid fa-user"></i>My Account
</button>
</li>
<li class="nav-item d-none" id="nav-Logout">
<button type="button" class="btn btn-logout">
<i class="fas fa-sign-out-alt"></i>Logout
</button>
</li>
</ul>
</div>
</div>
</nav>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>- CSS CODE
Once the fundamental HTML layout of the navbar is established, the subsequent step involves applying styles to the navbar through the CSS.
body {
font-family: 'Inter', sans-serif;
background-color: #e9ecef;
}
.navbar-custom {
background: linear-gradient(90deg, #058185 0%, #0e6663 50%, #048faa 100%);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
padding-top: 0.8rem;
padding-bottom: 0.8rem;
transition: all 0.3s ease-in-out;
}
.navbar-custom .brand-navbar {
font-size: 1.85rem;
font-weight: 700;
color: #ffffff;
letter-spacing: -0.25px;
transition: transform 0.2s ease-out;
text-decoration: none;
}
.navbar-custom .brand-navbar:hover {
color: #f0f0f0;
transform: scale(1.03);
}
/* Search Bar Styling */
.search-form-wrapper {
flex-grow: 1;
display: flex;
justify-content: center;
}
.search-form {
display: flex;
align-items: center;
width: 100%;
max-width: 500px;
background-color: rgba(255, 255, 255, 0.15);
border-radius: 50px;
padding: 0.25rem 0.25rem 0.25rem 1rem;
transition: background-color 0.3s ease;
}
.search-form:focus-within {
background-color: rgba(255, 255, 255, 0.25);
box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.3);
}
.search-form .form-control {
background-color: transparent;
border: none;
color: #ffffff;
padding: 0.5rem 0.75rem;
font-size: 0.9rem;
box-shadow: none;
}
.search-form .form-control::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.search-form .btn-search {
background-color: #ffffff;
color: #0052d4;
border-radius: 50%;
padding: 0.5rem;
width: 41px;
height: 38px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
transition: all 0.2s ease-in-out;
border: none;
}
.search-form .btn-search:hover {
background-color: #f0f0f0;
transform: scale(1.1);
}
.advanced-search-link {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
margin-left: 0.75rem;
white-space: nowrap;
transition: color 0.2s ease-in-out, text-shadow 0.2s ease;
}
.advanced-search-link:hover {
color: #ffffff;
text-decoration: none;
text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
/* Navbar Buttons Styling */
.navbar-custom .nav-item .btn {
font-size: 0.85rem;
font-weight: 600;
padding: 0.6rem 1.1rem;
border-radius: 50px;
margin-left: 0.6rem;
transition: all 0.25s ease-in-out;
border: 1px solid transparent;
white-space: nowrap;
display: inline-flex;
align-items: center;
}
.navbar-custom .nav-item .btn i {
margin-right: 0.5em; /* Space between icon and text */
}
.btn-login {
background-color: transparent;
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.7);
}
.btn-login:hover {
background-color: rgba(255, 255, 255, 0.15);
border-color: #ffffff;
color: #ffffff;
transform: translateY(-2px);
}
.btn-subscribe {
background-color: #00ff1a;
color: #333333;
border-color: #04ff00;
}
.btn-subscribe:hover {
background-color: #ffc107;
border-color: #ffc107;
color: #000000;
transform: translateY(-2px) scale(1.02);
box-shadow: 0 4px 10px rgba(255, 215, 0, 0.3);
}
.btn-free-registration {
background-color: #ffffff;
color: #0052d4;
border-color: #ffffff;
}
.btn-free-registration:hover {
background-color: #f0f0f0;
border-color: #f0f0f0;
color: #003d99;
transform: translateY(-2px);
}
.btn-my-account {
/* Style for My Account button */
background-color: transparent;
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.7);
}
.btn-my-account:hover {
background-color: rgba(255, 255, 255, 0.15);
border-color: #ffffff;
color: #ffffff;
transform: translateY(-2px);
}
.btn-logout {
/* Style for Logout button */
background-color: #dc3545;
color: #ffffff;
border-color: #dc3545;
}
.btn-logout:hover {
background-color: #c82333;
border-color: #bd2130;
transform: translateY(-2px);
}
/* Styling for Hamburger Menu */
.navbar-custom .toggler-navbar {
border-color: rgba(255, 255, 255, 0.5);
}
.navbar-custom .toggler-navbar:focus {
box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.3);
}
.navbar-custom .toggler-navbar-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255, 255, 255, 0.9)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/* Responsive Adjustments */
@media (max-width: 991.98px) {
/* Bootstrap's lg breakpoint */
.search-form-wrapper {
padding: 0 0.5rem;
}
.search-form {
max-width: none;
margin-top: 0.75rem;
margin-bottom: 0.75rem;
background-color: rgba(
255,
255,
255,
0.2
);
}
.advanced-search-link {
display: block;
margin-left: 0;
margin-top: 0.5rem;
text-align: center;
padding: 0.5rem 0;
color: #ffffff;
}
.navbar-custom .navbar-nav {
align-items: stretch;
padding-top: 0.5rem;
}
.navbar-custom .nav-item .btn {
width: 100%;
margin-left: 0;
margin-bottom: 0.75rem;
justify-content: center;
}
.navbar-custom .nav-item:last-child .btn {
margin-bottom: 0.25rem;
}
}- JavaScript
At last, we must develop a function in JavaScript.Â
let isUserLoggedIn = false;
const navLogin = document.getElementById('nav-Login');
const navFreeRegistration = document.getElementById('navZeroFeeRegistration');
const navSubscribe = document.getElementById('nav-Subscribe');
const navMyAccount = document.getElementById('nav-MyAccount');
const navLogout = document.getElementById('nav-Logout');
// Update Function navbar based while login state
function updateNavbarForLoginState() {
if (isUserLoggedIn) {
// User is logged in: Show My Account & Logout, Hide Login & Free Registration
navLogin.classList.add('d-none');
navFreeRegistration.classList.add('d-none');
navMyAccount.classList.remove('d-none');
navLogout.classList.remove('d-none');
} else {
// User is logged out: Show Login & Free Registration, Hide My Account & Logout
navLogin.classList.remove('d-none');
navFreeRegistration.classList.remove('d-none');
navMyAccount.classList.add('d-none');
navLogout.classList.add('d-none');
}
}
// --- Event Listeners for Login/Logout (Simulation) ---
if (navLogin) {
navLogin.querySelector('button').addEventListener('click', () => {
isUserLoggedIn = true;
updateNavbarForLoginState();
console.log('User logged in (simulated)');
// In a real app, this would likely redirect to a login page or open a modal
});
}
if (navLogout) {
navLogout.querySelector('button').addEventListener('click', () => {
isUserLoggedIn = false;
updateNavbarForLoginState();
console.log('User logged out (simulated)');
// In a real app, this would clear session/token and redirect
});
}
// --- Initial setup while page load ---
document.addEventListener('DOMContentLoaded', () => {
updateNavbarForLoginState(); // Set for initial button visibility
// For demo: A button to toggle login state
const toggleLoginButton = document.createElement('button');
toggleLoginButton.textContent = 'Toggle Login State (Demo)';
toggleLoginButton.classList.add(
'btn',
'btn-info',
'position-fixed',
'bottom-0',
'end-0',
'm-3'
);
toggleLoginButton.style.zIndex = '1050';
toggleLoginButton.onclick = () => {
isUserLoggedIn = !isUserLoggedIn;
updateNavbarForLoginState();
console.log('Login state toggled. Logged in: ' + isUserLoggedIn);
};
document.body.appendChild(toggleLoginButton);
console.log('Navbar script loaded. Initial login state: ' + isUserLoggedIn);
});Conclusion & Final Thoughts
You have successfully crafted a sleek and latest responsive Navigation bar utilizing HTML, CSS (Bootstrap 5) and a bit of JavaScript. This king of navbar commonly found in almost latest websites. You can adjust links, colors, and styles to suit you preferences. By adhering to these straightforward steps, you have enhanced your frontend web development abilities and created an essential element of any professional website.
Don’t forget to try out different options/experiment and personalize your Navbar to make it with unique elements and enhance its aesthetic appeal. To further develop your HTML, CSS, and JS abilities, consider attempting to replicate various Navbars design found on this website.
If you face any challenges while building of this latest navbar, feel free to download the source code files for this project at no cost by clicking the download button.