Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create a responsive header with CSS?
A responsive header is a navigation bar that adapts to different screen sizes, ensuring optimal user experience across desktop, tablet, and mobile devices. The header typically includes a logo and navigation menu that reorganizes itself based on the viewport width.
Syntax
/* Basic responsive header structure */
nav {
overflow: hidden;
background-color: color;
}
@media screen and (max-width: width) {
/* Responsive styles */
}
Set the nav for logo and menus
The <nav> element is used to place the logo and menus. Both these are set using the <a> element −
<nav>
<a class="links logo" href="#">Company Logo/Image</a>
<div class="rightSection">
<a class="selected links" href="#">Home</a>
<a class="links" href="#">Contact Us</a>
<a class="links" href="#">About Us</a>
<a class="links" href="#">More Info</a>
<a class="links" href="#">Register</a>
</div>
</nav>
Position the header container
To position the header correctly, use the overflow property and set it to hidden to contain floated elements −
nav {
overflow: hidden;
background-color: #330b7c;
padding: 10px;
}
Style the navigation links
The menu links are styled and positioned using flexbox or float properties. Remove the default underline using the text-decoration property −
.links {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
float: left;
color: white;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
border-radius: 4px;
}
Set the responsive behavior
When the viewport width is less than 870px, the navigation links stack vertically using media queries −
@media screen and (max-width: 870px) {
nav .links {
float: none;
display: block;
text-align: left;
}
.rightSection {
float: none;
}
}
Example
The following example creates a complete responsive header that adapts to different screen sizes −
<!DOCTYPE html>
<html>
<head>
<style>
* {box-sizing: border-box;}
nav {
overflow: hidden;
background-color: #330b7c;
padding: 10px;
}
.links {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
float: left;
color: white;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
nav .logo {
font-size: 25px;
font-weight: bold;
}
nav .links:hover {
background-color: rgb(214, 238, 77);
color: rgb(42, 10, 94);
}
nav .selected {
background-color: dodgerblue;
color: white;
}
.rightSection {
float: right;
}
@media screen and (max-width: 870px) {
nav .links {
float: none;
display: block;
text-align: left;
}
.rightSection {
float: none;
}
}
</style>
</head>
<body>
<nav>
<a class="links logo" href="#">Company Logo/Image</a>
<div class="rightSection">
<a class="selected links" href="#">Home</a>
<a class="links" href="#">Contact Us</a>
<a class="links" href="#">About Us</a>
<a class="links" href="#">More Info</a>
<a class="links" href="#">Register</a>
</div>
</nav>
</body>
</html>
A purple navigation header displays with "Company Logo/Image" on the left and menu items (Home, Contact Us, About Us, More Info, Register) on the right. The Home link has a blue background (selected state). When hovering over links, they change to a light green background. On screens smaller than 870px, the menu items stack vertically below the logo.
Conclusion
Creating a responsive header with CSS involves using media queries to adapt the layout for different screen sizes. The combination of flexbox or float properties with media queries ensures your navigation remains functional and visually appealing across all devices.
4K+ Views
