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 side navigation menu with CSS?
A responsive side navigation menu adapts its layout based on screen size. On larger screens, it appears as a fixed sidebar, while on smaller screens it transforms into a horizontal navigation bar.
Syntax
/* Fixed sidebar for desktop */
nav {
position: fixed;
width: fixed-width;
height: 100%;
}
/* Responsive behavior */
@media screen and (max-width: breakpoint) {
nav {
position: relative;
width: 100%;
height: auto;
}
}
Example: Responsive Side Navigation
The following example creates a side navigation that transforms from a vertical sidebar to a horizontal menu on smaller screens −
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
margin: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
nav {
margin: 0;
padding: 0;
width: 150px;
background-color: #2f77e4;
position: fixed;
height: 100%;
overflow: auto;
}
nav a {
display: block;
color: rgb(255, 255, 255);
font-weight: bolder;
font-size: 20px;
padding: 16px;
text-decoration: none;
}
nav a.selected {
background-color: rgb(15, 189, 20);
color: rgb(255, 255, 255);
}
nav a:hover:not(.selected) {
background-color: white;
color: #2f77e4;
}
div.content {
margin-left: 200px;
padding: 1rem 16px;
min-height: 100vh;
}
@media screen and (max-width: 700px) {
nav {
width: 100%;
height: auto;
position: relative;
}
nav a {
float: left;
}
div.content {
margin-left: 0;
}
}
</style>
</head>
<body>
<nav class="sideBar">
<a class="selected" href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
<a href="#">Blog</a>
</nav>
<div class="content">
<h1>Welcome to Our Website</h1>
<h2>Resize the browser to 700px to see the navigation change from vertical to horizontal</h2>
<p>This content area adjusts its margin based on the navigation layout. On larger screens, it has a left margin to accommodate the fixed sidebar. On smaller screens, the margin is removed as the navigation becomes horizontal.</p>
</div>
</body>
</html>
Desktop view: A blue fixed sidebar on the left with white navigation links, and main content area to the right. Mobile view (?700px): The sidebar transforms into a horizontal blue navigation bar at the top, with content below taking full width. The "Home" link appears highlighted in green, and other links show hover effects.
Key Features
Fixed Positioning: The sidebar uses position: fixed to remain visible while scrolling on desktop screens.
Media Query Breakpoint: At 700px and below, the layout switches to horizontal using @media screen and (max-width: 700px).
Content Adjustment: The main content area uses margin-left to avoid overlap with the fixed sidebar, which is removed on smaller screens.
Conclusion
Responsive side navigation menus provide excellent user experience across devices. Use fixed positioning for desktop sidebars and media queries to transform them into horizontal menus on mobile devices.
877 Views
