Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a responsive navigation bar with dropdown in CSS?
To create a responsive navigation bar, the media queries are used. Media Queries is used when you need to set a style to different devices such as tablet, mobile, desktop, etc. The navigation bar with dropdown looks like the following. The dropdown menu is having Contact Us, Visit Us, and About Us sub-menus −
Style the Navigation Menu and Links
The background color of the navigation menu are set here, with the links. The menu links are set with the display property inline-block. It displays an element as an inline-level block container −
nav{
background-color: #017575;
width: 100%;
}
.links,.links-hidden{
display: inline-block;
color: rgb(255, 255, 255);
text-decoration: none;
font-size: 18px;
font-weight: bold;
padding: 20px;
}
Menu Links
The following are our menu links −
<a class="links" href="#">HOME</a> <a class="links" href="#">EMPLOYEES</a> <a class="links" href="#">CAREER</a> <a class="links" href="#">Our History</a> <a class="links" href="#">Fund Us</a> <a class="links" href="#">More Info</a>
Dropdown Menu Link
The following is the menu link Others that is to be set as dropdown −
<div class="dropdown-menu">
<button class="menu-btn">Others <</button>
<div class="menu-content">
<a class="links-hidden" href="#">Contact Us</a>
<a class="links-hidden" href="#">Visit Us</a>
<a class="links-hidden" href="#">About Us</a>
</div>
</div>
Styling the Dropdown Link
This is how the dropdown menu is styled −
.dropdown-menu:hover .menu-content {
display: block;
}
.dropdown-menu:hover .menu-btn {
background-color: #3e8e41;
}
Hamburger Menu
The hamburger menu are three stacked lines. It is set for responsiveness, when the browser size is reduced i.e. appears on tablets and mobiles −
<a class="hamburger">☰</a>
Media Queries for Responsiveness
The following is set for tablet and mobile view −
@media screen and (max-width: 880px) {
nav a:not(:first-child) {
display: none;
}
nav a.hamburger {
float: right;
display: block;
padding: 12px;
}
.dropdown-menu{
display: none;
}
nav.openNav a.hamburger {
position: relative;
}
nav.openNav a {
float: none;
display: block;
text-align: center;
}
}
Example
The following is the code to create a responsive navigation bar with dropdown −
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
*,*::after,*::before{
box-sizing: border-box;
}
.menu-btn {
font-size: 18px;
font-weight: bold;
display: inline-block;
text-align: center;
background-color: #040008;
color: white;
padding: 20px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
border: none;
width: 100%;
}
.dropdown-menu {
position: relative;
display: inline-block;
}
.menu-content {
display: none;
position: absolute;
width: 100%;
background-color: #017575;
min-width: 160px;
z-index: 1;
}
nav{
background-color: #017575;
width: 100%;
}
.links,.links-hidden{
display: inline-block;
color: rgb(255, 255, 255);
text-decoration: none;
font-size: 18px;
font-weight: bold;
padding: 20px;
}
.links-hidden:hover,.links:hover {
background-color: rgb(8, 107, 46);
}
.dropdown-menu:hover .menu-content {
display: block;
}
.dropdown-menu:hover .menu-btn {
background-color: #3e8e41;
}
.hamburger {
color: white;
font-weight: bolder;
display: none;
}
@media screen and (max-width: 880px) {
nav a:not(:first-child) {
display: none;
}
nav a.hamburger {
float: right;
display: block;
padding: 12px;
}
.dropdown-menu{
display: none;
}
nav.openNav a.hamburger {
position: relative;
}
nav.openNav a {
float: none;
display: block;
text-align: center;
}
}
nav.openNav div.dropdown-menu{
display: block;
width: 100%;
}
</style>
</head>
<body>
<nav>
<a class="links" href="#">HOME</a>
<a class="links" href="#">EMPLOYEES</a>
<a class="links" href="#">CAREER</a>
<a class="links" href="#">Our History</a>
<a class="links" href="#">Fund Us</a>
<a class="links" href="#">More Info</a>
<div class="dropdown-menu">
<button class="menu-btn">Open <</button>
<div class="menu-content">
<a class="links-hidden" href="#">Contact Us</a>
<a class="links-hidden" href="#">Visit Us</a>
<a class="links-hidden" href="#">About Us</a>
</div>
</div>
<a class="hamburger">☰</a>
</nav>
<script>
var x = document.getElementsByTagName("nav")[0];
function toggleNav() {
if (x.className === "") {
x.className = " openNav";
}
else {
x.className = "";
}
}
document.querySelector(".hamburger").addEventListener("click", toggleNav);
</script>
</body>
</html>
Updated on: 27-Oct-2023
1K+ Views
Advertisements