Learn how to create a responsive navbar/header with pure CSS without using any JavaScript.
Table of Contents
A responsive navbar is an essential component of any website design. It enables users to easily navigate your website, whether they are browsing on a desktop or mobile device. Pure CSS is a great way to design a responsive navbar without using any JavaScript. It's lightweight, fast-loading, and easy to customize.
Responsive Navbar design makes any website attractive. The Navbar section plays an important role in user satisfaction and site structure. In this tutorial, we'll show you how to create a responsive navbar with pure CSS in easy steps. We'll guide you through the HTML markup and styling for both desktop and mobile devices.
So, Let's start making an amazing responsive navbar using HTML and pure CSS step by step.
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
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.
The navigation bar consists of four links: Home, About, Projects, and Contact Us. Let’s break it down step-by-step:
1. DOCTYPE and <html> Tag
<!DOCTYPE html>
<html lang="en"><!DOCTYPE html>: Declares the document as HTML5.<html lang="en">: The language of the document is set to English.
2. <head> Section
<head>
<title>Responsive Navbar</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel="stylesheet" href="styles.css" />
</head><title>: Sets the page title to "Responsive Navbar" (shown on the browser tab).<meta charset="UTF-8">: Defines the character encoding for the page to support special characters.<meta name="viewport" content="width=device-width" />: Ensures the page scales correctly on mobile devices.<link rel="stylesheet" href="styles.css">: Links to an external CSS file for styling (assumed to contain the layout and design for the navbar).
3. <body> Section
<body>
<div class="nav">
<input type="checkbox" id="nav-check">
<div class="nav-header">
<div class="nav-title">codewithFaraz</div>
</div>
<div class="nav-btn">
<label for="nav-check">
<span></span>
<span></span>
<span></span>
</label>
</div>
<div class="nav-links">
<a href="#" target="_blank">Home</a>
<a href="#" target="_blank">About</a>
<a href="#" target="_blank">Projects</a>
<a href="#" target="_blank">Contact us</a>
</div>
</div>
</body>Explanation of Elements Inside <body>
<div class="nav">
This is the main container for the navigation bar.
Checkbox Input (Hamburger Icon Toggle)
<input type="checkbox" id="nav-check"><input type="checkbox">: This checkbox serves as the toggle button for the navigation links on smaller screens.id="nav-check": The ID is used to connect the checkbox with the label (hamburger icon) throughfor="nav-check".
Navbar Header and Title
<div class="nav-header">
<div class="nav-title">codewithFaraz</div>
</div><div class="nav-title">: Displays the site name or brand ("codewithFaraz").
Hamburger Button (Toggle)
<div class="nav-btn">
<label for="nav-check">
<span></span>
<span></span>
<span></span>
</label>
</div><label for="nav-check">: This label acts as the hamburger button.<span></span>(three times): These empty<span>elements create the three horizontal lines of the hamburger icon.
Navigation Links
<div class="nav-links">
<a href="#" target="_blank">Home</a>
<a href="#" target="_blank">About</a>
<a href="#" target="_blank">Projects</a>
<a href="#" target="_blank">Contact us</a>
</div><div class="nav-links">: Contains the menu links.<a href="#">: Each<a>is a hyperlink.target="_blank": Opens the link in a new tab.
After creating the files just paste the below 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.
This is the basic structure of our responsive 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.
Below block of CSS code defines the styling and layout for a navigation bar with a hamburger menu icon (three horizontal lines) on the left side. The navigation bar is designed to be responsive and will adapt to different screen sizes using a media query.
Let’s break down the CSS code part by part:
1. Global Styles
* {
box-sizing: border-box;
}box-sizing: border-box: Ensures that padding and border are included in the total width and height of elements. This helps prevent layout issues.
body {
margin: 0px;
font-family: 'segoe ui';
background-color: #D5CDCC;
}margin: 0px;: Removes any default margin from the<body>.font-family: 'segoe ui';: Sets the font of the entire page to Segoe UI.background-color: #D5CDCC;: Gives the page a light gray background.
2. Navbar Styling
.nav {
height: 50px;
width: 100%;
background-color: #3482B5;
position: relative;
}height: 50px;: Sets the height of the navbar.width: 100%;: Makes the navbar span the entire width of the screen.background-color: #3482B5;: Sets the navbar’s background to blue.position: relative;: Makes it easier to position child elements absolutely within this navbar.
3. Title Section
.nav > .nav-header {
display: inline;
}
.nav > .nav-header > .nav-title {
display: inline-block;
font-size: 22px;
color: #fff;
padding: 10px 10px 10px 10px;
}- Title ("codewithFaraz") is displayed inline next to other navbar elements.
color: #fff;: Sets the title text color to white.padding: 10px;: Adds padding around the title to make it visually appealing.
4. Navbar Button (Hidden by Default)
.nav > .nav-btn {
display: none;
}display: none;: The hamburger button is hidden on large screens and will only appear on smaller screens via media queries.
5. Navigation Links (Desktop View)
.nav > .nav-links {
display: inline;
float: right;
font-size: 18px;
}
.nav > .nav-links > a {
display: inline-block;
padding: 13px 10px;
text-decoration: none;
color: #efefef;
}
.nav > .nav-links > a:hover {
background-color: rgba(0, 0, 0, 0.3);
}float: right;: Aligns the links to the right side.padding: 13px 10px;: Adds spacing around each link.text-decoration: none;: Removes the underlining from links.color: #efefef;: Sets the link text color to light gray.- Hover Effect: When a user hovers over a link, the background color changes to a semi-transparent black (
rgba(0, 0, 0, 0.3)).
6. Checkbox (Hidden)
.nav > #nav-check {
display: none;
}- The checkbox input is hidden but used for toggling the menu visibility on smaller screens.
7. Media Query (Mobile View: Max Width 800px)
@media (max-width:800px) {This section defines how the navbar behaves on screens smaller than 800px.
Hamburger Button Display on Mobile
.nav > .nav-btn {
display: inline-block;
position: absolute;
right: 0px;
top: 0px;
}display: inline-block;: Shows the hamburger button.position: absolute;: Positions it in the top-right corner of the navbar.
.nav > .nav-btn > label {
width: 50px;
height: 50px;
padding: 13px;
}- The label (hamburger icon) is given fixed dimensions and padding.
Hamburger Icon (Three Lines)
.nav > .nav-btn > label > span {
display: block;
width: 25px;
height: 10px;
border-top: 2px solid #eee;
}- Three empty spans create the hamburger icon lines.
border-top: 2px solid #eee;: Creates the thin white lines.
Collapsible Links (Mobile View)
.nav > .nav-links {
position: absolute;
display: block;
width: 100%;
background-color: #333;
height: 0px;
transition: all 0.3s ease-in;
overflow-y: hidden;
top: 50px;
left: 0px;
}position: absolute;: Positions the menu below the navbar.height: 0px;: The menu is initially collapsed (height 0).transition: all 0.3s ease-in;: Adds a smooth transition when the menu expands or collapses.
Expandable Links on Toggle
.nav > #nav-check:checked ~ .nav-links {
height: calc(100vh - 50px);
overflow-y: auto;
}#nav-check:checked ~ .nav-links: When the checkbox is checked, the menu’s height expands to fit the screen (100vh - 50px).overflow-y: auto;: Adds a scrollbar if the menu overflows vertically.
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.
* {
box-sizing: border-box;
}
body {
margin: 0px;
font-family: 'segoe ui';
background-color: #D5CDCC;
}
.nav {
height: 50px;
width: 100%;
background-color: #3482B5;
position: relative;
}
.nav > .nav-header {
display: inline;
}
.nav > .nav-header > .nav-title {
display: inline-block;
font-size: 22px;
color: #fff;
padding: 10px 10px 10px 10px;
}
.nav > .nav-btn {
display: none;
}
.nav > .nav-links {
display: inline;
float: right;
font-size: 18px;
}
.nav > .nav-links > a {
display: inline-block;
padding: 13px 10px 13px 10px;
text-decoration: none;
color: #efefef;
}
.nav > .nav-links > a:hover {
background-color: rgba(0, 0, 0, 0.3);
}
.nav > #nav-check {
display: none;
}
@media (max-width:800px) {
.nav > .nav-btn {
display: inline-block;
position: absolute;
right: 0px;
top: 0px;
}
.nav > .nav-btn > label {
display: inline-block;
width: 50px;
height: 50px;
padding: 13px;
}
.nav > .nav-btn > label:hover,.nav #nav-check:checked ~ .nav-btn > label {
background-color: rgba(0, 0, 0, 0.3);
}
.nav > .nav-btn > label > span {
display: block;
width: 25px;
height: 10px;
border-top: 2px solid #eee;
}
.nav > .nav-links {
position: absolute;
display: block;
width: 100%;
background-color: #333;
height: 0px;
transition: all 0.3s ease-in;
overflow-y: hidden;
top: 50px;
left: 0px;
}
.nav > .nav-links > a {
display: block;
width: 100%;
}
.nav > #nav-check:not(:checked) ~ .nav-links {
height: 0px;
}
.nav > #nav-check:checked ~ .nav-links {
height: calc(100vh - 50px);
overflow-y: auto;
}
} Final Output:
Conclusion:
In conclusion, creating a responsive navbar or header with pure CSS is a great way to improve the user experience on your website. By following the steps outlined in this tutorial, you can create a functional and stylish navbar that works on both mobile and desktop devices. Remember to customize the HTML markup and CSS styles to suit your website's needs, and don't forget to test your navbar on different devices to ensure it works as intended.
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 😊
