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
Selected Reading
How to create a responsive navigation menu with icons, using CSS?
A responsive navigation menu with icons adapts to different screen sizes, providing an optimal user experience across devices. This menu displays horizontally on larger screens and stacks vertically on smaller devices.
Syntax
/* Basic responsive navigation structure */
nav {
width: 100%;
background-color: color;
}
.nav-link {
display: inline-block;
padding: value;
text-decoration: none;
}
@media screen and (max-width: breakpoint) {
.nav-link {
display: block;
}
}
Example
The following example creates a responsive navigation menu with Font Awesome icons −
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation Menu</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
nav {
width: 100%;
background-color: #272727;
overflow: auto;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.links {
display: inline-block;
text-align: center;
padding: 14px 20px;
color: #b289fd;
text-decoration: none;
font-size: 17px;
transition: background-color 0.3s ease;
}
.links:hover {
background-color: #646464;
}
.selected {
background-color: #00122b;
}
.links i {
margin-right: 8px;
}
@media screen and (max-width: 600px) {
.links {
display: block;
text-align: left;
border-bottom: 1px solid #444;
}
.links:last-child {
border-bottom: none;
}
}
</style>
</head>
<body>
<nav>
<a class="links selected" href="#"><i class="fa fa-fw fa-home"></i>Home</a>
<a class="links" href="#"><i class="fa fa-fw fa-user"></i>Login</a>
<a class="links" href="#"><i class="fa fa-user-circle-o"></i>Register</a>
<a class="links" href="#"><i class="fa fa-fw fa-envelope"></i>Contact Us</a>
<a class="links" href="#"><i class="fa fa-info-circle"></i>More Info</a>
</nav>
<div style="padding: 20px;">
<h2>Responsive Navigation Demo</h2>
<p>Resize your browser window to see the navigation menu adapt to different screen sizes.</p>
</div>
</body>
</html>
Output
The above code will produce the following output −
On desktop screens (>600px): A horizontal navigation bar with purple text and icons, dark gray background. The "Home" link appears selected with a darker background. On mobile screens (?600px): The navigation menu transforms to a vertical layout with each link stacked vertically, maintaining the same styling but optimized for touch interaction.
Key Features
- Responsive Design: Uses CSS media queries to adapt layout based on screen size
- Icon Integration: Font Awesome icons enhance visual appeal and usability
- Hover Effects: Smooth transitions provide visual feedback on interaction
- Active State: Selected menu item is visually distinguished
- Mobile Optimization: Vertical stacking improves touch accessibility
Conclusion
This responsive navigation menu provides an effective solution for websites that need to work across all devices. The combination of CSS media queries and flexbox principles ensures optimal user experience on both desktop and mobile platforms.
Updated on: 2026-03-15T14:14:44+05:30
877 Views
Advertisements