Welcome to a beginner-friendly guide on creating a responsive navbar HTML, CSS and JS for your website. In smartphones and tablets, having a navbar that adjusts seamlessly to different screen sizes is a must. We'll take you step by step through the process, making it easy for you to enhance user experience and engagement on your website.
Think of a responsive navbar as your website's navigation lifeline. It's the menu bar that guides visitors to different parts of your site. But what's unique about it is its adaptability – it looks and works great on both big desktop screens and tiny phone displays. This means that whether your visitors are browsing from a computer or a mobile device, they'll find it easy to explore your website. Plus, search engines love responsive designs, which can boost your website's visibility and ranking.
Start by setting up the structure of your navbar using HTML. This involves creating a list of links that represent the different sections of your site. Then comes the fun part – styling! CSS lets you add colors, fonts, and spacing to make your navbar look awesome. To ensure it works like a charm on any device, we'll introduce some JavaScript magic. With just a few lines of code, you can create a menu button that expands on small screens, making navigation a breeze. Finally, we'll talk about testing your creation on various devices and making any necessary tweaks to make sure everything works perfectly.
To building a responsive navbar that welcomes users from all devices. With HTML, CSS and JS as your tools, you have the power to create a navigation experience that's both sleek and user-friendly. So, let's embark on this exciting journey of crafting a responsive navbar – your website's ticket to a smoother, more engaging user experience!
Create a Responsive Navbar HTML, CSS and JS (source code)
Creating a responsive navbar for your website is simpler than you might think. With just three essential files, you'll have your navigation up and running smoothly. Let's explore the easy file structure and code extraction process to get you started.
File Structure of HTML, CSS and JS:
To build your responsive navbar using HTML, CSS, and JS, you'll need three files:
- index.html: This is where your website's structure lives. It holds the content and layout of your webpage, including the navbar.
- style.css: Here, you'll define how your navbar looks – colors, fonts, spacing, and more. CSS brings your design to life.
- main.js: This is where JavaScript comes in. You'll add interactive elements, like the menu button for small screens, to make your navbar responsive.
Copy and paste the following code into each respective file:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link
href="https://cdn.jsdelivr.net/npm/remixicon@3.2.0/fonts/remixicon.css"
rel="stylesheet">
<link rel="stylesheet" href="assets/css/styles.css">
<title>Responsive Navbar HTML, CSS ans JS - Codewithzan</title>
</head>
<body>
<header class="header">
<nav class="nav container">
<div class="nav__data">
<a href="#" class="nav__logo">
<i class="ri-code-line"></i> Codewithzan
</a>
<div class="nav__toggle" id="nav-toggle">
<i class="ri-menu-line nav_open"></i>
<i class="ri-close-line nav__close"></i>
</div>
</div>
<div class="nav__menu" id="nav-menu">
<ul class="nav__list">
<li><a href="#" class="nav__link">Home</a></li>
<li><a href="#" class="nav__link">About</a></li>
<li class="dropdown__item">
<div class="nav__link">
Blogs <i class="ri-arrow-down-s-line dropdown__arrow"></i>
</div>
<ul class="dropdown__menu">
<li>
<a href="#" class="dropdown__link">
JavaScript
</a>
</li>
<li>
<a href="#" class="dropdown__link">
Web-Design
</a>
</li>
</ul>
</li>
<li><a href="#" class="nav__link">Service</a></li>
<li><a href="#" class="nav__link">Contact</a></li>
</ul>
</div>
</nav>
</header>
<script src="assets/js/main.js"></script>
</body>
</html>
CSS
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap");
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: "Montserrat", sans-serif;
font-size: .938rem;
background-color: hsl(220, 100%, 97%);
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.container {
max-width: 1120px;
margin-inline: 1.5rem;
}
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: hsl(220, 24%, 12%);
box-shadow: 0 2px 16px hsla(220, 32%, 8%, .3);
z-index: 100;
}
.nav {
height: 3.5rem;
}
.nav__logo,
.nav_open,
.nav__close {
color: #fff;
}
.nav__data {
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav__logo {
display: inline-flex;
align-items: center;
column-gap: .25rem;
font-weight: 600;
}
.nav__logo i {
font-weight: initial;
font-size: 1.25rem;
}
.nav__toggle {
position: relative;
width: 32px;
height: 32px;
}
.nav_open,
.nav__close {
position: absolute;
width: max-content;
height: max-content;
inset: 0;
margin: auto;
font-size: 1.25rem;
cursor: pointer;
transition: opacity .1s, transform .4s;
}
.nav__close {
opacity: 0;
}
@media screen and (max-width: 1118px) {
.nav__menu {
position: absolute;
left: 0;
top: 2.5rem;
width: 100%;
height: calc(100vh - 3.5rem);
overflow: auto;
pointer-events: none;
opacity: 0;
transition: top .4s, opacity .3s;
}
.nav__menu::-webkit-scrollbar {
width: 0;
}
.nav__list {
background-color: hsl(220, 24%, 12%);
padding-top: 1rem;
}
}
.nav__link {
color: #fff;
background-color: hsl(220, 24%, 12%);
font-weight: 600;
padding: 1.25rem 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
transition: background-color .3s;
}
.nav__link:hover {
background-color: hsl(220, 24%, 15%);
}
.show-menu {
opacity: 1;
top: 3.5rem;
pointer-events: initial;
}
.show-icon .nav_open {
opacity: 0;
transform: rotate(90deg);
}
.show-icon .nav__close {
opacity: 1;
transform: rotate(90deg);
}
.dropdown__item {
cursor: pointer;
}
.dropdown__arrow {
font-size: 1.25rem;
font-weight: initial;
transition: transform .4s;
}
.dropdown__link {
padding: 1.25rem 1.25rem 1.25rem 2.5rem;
color: #fff;
background-color: hsl(220, 24%, 15%);
display: flex;
align-items: center;
column-gap: .5rem;
font-weight: 600;
transition: background-color .3s;
}
.dropdown__link:hover {
background-color: hsl(220, 24%, 12%);
}
.dropdown__menu {
max-height: 0;
overflow: hidden;
transition: max-height .4s ease-out;
}
.dropdown__item:hover .dropdown__menu {
max-height: 1000px;
transition: max-height .4s ease-in;
}
.dropdown__item:hover .dropdown__arrow {
transform: rotate(180deg);
}
@media screen and (max-width: 340px) {
.container {
margin-inline: 1rem;
}
.nav__link {
padding-inline: 1rem;
}
}
@media screen and (min-width: 1118px) {
.container {
margin-inline: auto;
}
.nav {
height: calc(3.5rem + 2rem);
display: flex;
justify-content: space-between;
}
.nav__toggle {
display: none;
}
.nav__list {
height: 100%;
display: flex;
column-gap: 3rem;
}
.nav__link {
height: 100%;
padding: 0;
justify-content: initial;
column-gap: .25rem;
}
.nav__link:hover {
background-color: transparent;
}
.dropdown__item {
position: relative;
}
.dropdown__menu {
max-height: initial;
overflow: initial;
position: absolute;
left: 0;
top: 6rem;
opacity: 0;
pointer-events: none;
transition: opacity .3s, top .3s;
}
.dropdown__link {
padding-inline: 1rem 3.5rem;
}
.dropdown__link {
padding-inline: 1rem;
}
.dropdown__item:hover .dropdown__menu {
opacity: 1;
top: 5.5rem;
pointer-events: initial;
transition: top .3s;
}
}
JAVASCRIPT
const showMenu = (toggleId, navId) => {
const toggle = document.getElementById(toggleId),
nav = document.getElementById(navId)
toggle.addEventListener('click', () => {
nav.classList.toggle('show-menu')
toggle.classList.toggle('show-icon')
})
}
showMenu('nav-toggle', 'nav-menu')
Feel free to copy and paste the above code into their respective files, or you can download the entire code bundle with just one click. With this straightforward file structure and ready-to-use code, you're well on your way to create a responsive navbar that enhances your website's user experience.