How to create a responsive navigation bar with pure CSS
Build a mobile-friendly menu that switches to a hamburger icon on small screens without JavaScript using only CSS and the checkbox hack.
Create a navigation bar that adapts to mobile devices using only CSS. You will build a layout that switches from a horizontal list to a vertical dropdown menu on screens smaller than 768px. This method requires no JavaScript and works in all modern browsers.
Prerequisites
- A text editor like VS Code or Sublime Text.
- A local web server environment or a static file host.
- A modern browser that supports CSS3 media queries and the checkbox hack.
- Basic knowledge of HTML structure and CSS selectors.
Step 1: Create the HTML structure
Start by creating a new file named index.html. Add the standard <!DOCTYPE html> declaration and open the <head> section to define the viewport meta tag for mobile responsiveness. Inside the <body> tag, create a container <nav> element. Within this container, place a hidden checkbox input named menu-toggle. Add a label element that wraps the text <span class="hamburger"> to serve as the trigger for the mobile menu. Finally, create an unordered list <ul> for the navigation links and add four anchor tags inside it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Menu</title>
</head>
<body>
<nav class="navbar">
<input type="checkbox" id="menu-toggle" hidden>
<label for="menu-toggle" class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</label>
<ul class="nav-list">
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</body>
</html>You will see the structure includes a hidden checkbox and a label with three span elements representing the hamburger lines. The hidden attribute ensures the checkbox does not appear on the page, while the label acts as the clickable button.
Step 2: Style the navigation container
Create a new file named style.css. Select the .navbar class and set a fixed width of 100% and a background color of #333. Use display: flex to align the hamburger icon and the list items horizontally. Set the justify-content property to space-between to push the menu items to the right side of the container. Apply a padding of 0 20px to give the links some breathing room.
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
padding: 1rem 2rem;
width: 100%;
position: relative;
}
.navbar ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}The ul selector removes default bullets and keeps the list inline. This creates a clean horizontal bar that spans the full width of the viewport.
Step 3: Style the links and the hamburger icon
Select the .nav-list class and ensure the links have white text color and no underline. Add a hover effect that changes the background color of the link to a lighter shade of gray. Style the .hamburger class to have a white background and a fixed width. Hide the .bar spans inside the hamburger by setting display: none initially. When the checkbox is checked, the label will change appearance to show the menu lines.
.nav-list li a {
color: #fff;
text-decoration: none;
padding: 10px;
display: block;
transition: background-color 0.3s;
}
.nav-list li a:hover {
background-color: #444;
}
.hamburger {
background: none;
border: none;
cursor: pointer;
width: 30px;
height: 24px;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0;
margin: 0;
}
.hamburger .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 9px;
transition: all 0.3s ease-in-out;
}The .bar elements are stacked vertically using flexbox. They start invisible but will animate into place when the menu is toggled. The transition property ensures the animation is smooth.
Step 4: Implement the CSS checkbox hack
Target the .navbar container when the #menu-toggle checkbox is checked. Change the .hamburger background to transparent and rotate the .bar elements to form an X shape. Position the .nav-list to be absolute and hidden off-screen to the left. When the checkbox is checked, remove the hidden state and position the list vertically inside the navbar. Use the :checked pseudo-class to control the visibility and layout of the menu.
.navbar input:checked ~ .hamburger .bar:nth-child(1) {
transform: rotate(45deg);
}
.navbar input:checked ~ .hamburger .bar:nth-child(2) {
opacity: 0;
}
.navbar input:checked ~ .hamburger .bar:nth-child(3) {
transform: rotate(-45deg);
}
.navbar input:checked ~ .nav-list {
display: flex;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
background-color: #333;
width: 100%;
height: auto;
z-index: 1000;
}
.nav-list li {
width: 100%;
text-align: center;
}When the user clicks the hamburger icon, the CSS detects the checked state. The first bar rotates 45 degrees, the middle bar disappears, and the third bar rotates -45 degrees. The list drops down below the header and takes up the full width of the screen.
Step 5: Add media queries for responsiveness
Define a media query for screens smaller than 768px. Inside this query, adjust the padding of the navbar to fit smaller devices. Ensure the hamburger icon is centered or aligned to the left depending on your design preference. The CSS written in previous steps automatically handles the mobile view because the checkbox hack works at any breakpoint. However, you can fine-tune the spacing for tablets and phones.
@media (max-width: 768px) {
.navbar {
padding: 1rem;
}
.hamburger {
width: 25px;
height: 20px;
}
.nav-list li a {
font-size: 14px;
padding: 12px;
}
}This block ensures that on tablets and phones, the menu items are smaller and the header padding is reduced. The layout remains fluid and adapts to the device width without breaking.
Verify the installation
Open index.html in your browser. Click the hamburger icon to toggle the menu. Observe the bars animating into an X shape and the list dropping down. Resize the browser window to simulate mobile devices. The menu should remain horizontal on large screens and switch to the vertical dropdown on small screens. Check the z-index to ensure the menu appears above other content if you add overlays later.
Expected Output:
Large Screen: [Home] [About] [Services] [Contact]
Small Screen: [Hamburger Icon]
[Home]
[About]
[Services]
[Contact]Troubleshooting
If the menu does not appear, check the z-index property on the .nav-list. Ensure it is higher than any other element on the page. Verify that the hidden attribute is present on the checkbox input, as some older browsers might ignore it without a workaround. If the bars do not rotate, inspect the transform properties and ensure no other CSS is overriding them. Clear your browser cache to remove old styles. Ensure the display: flex property is applied to the .nav-list inside the media query, otherwise the items will stack vertically even on desktop. If the hamburger icon does not respond to clicks, confirm that the cursor is set to pointer and that the label is not nested inside a disabled parent element.