How to Create a Responsive Top Navigation Menu with CSS & JavaScript?
Last Updated :
13 May, 2024
Improve
Top navigation menus offer users immediate access to key sections of a website. A responsive top navigation menu enhances user experience because if our website is fully responsive then it can be accessible by any device like PC, mobile, or tab.
Approach
- First, create a basic HTML structure for your web page and add some nav elements and you can add here a fab icons for the specific nav elements.
- Then use CSS to style your navigation bar elements, including fonts, colors, spacing, and layout.
- And use the javascript to show the hamburger menu when the screen size is small and also add an event listener on it to show the navbar on the small screen if you want.
- To make the navigation menu responsive you can use the css media query.
Example : The example shows how to create a responsive top navigation menu with css and javascript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation Bar With Dropdown</title>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<a href="/" class="brand-logo-a-tag"><img
src="https://media.geeksforgeeks.org/gfg-gg-logo.svg"
alt="Brand logo">
<span class="brand-logo-name">
GFG
</span>
</a>
<nav class="navbar">
<ul class="navbar-lists" id="myTopnav">
<li><i class="fas fa-home"></i><a class="navbar-link home-link"
href="#">Home</a></li>
<li><i class="fas fa-user"></i><a class="navbar-link about-link"
href="#about-us-section">About Us</a>
</li>
<li><i class="fas fa-envelope"></i><a
class="navbar-link contact-link"
href="#contact-form">Contact
Us</a></li>
<li> <i class="fas fa-newspaper"></i> <a
class="navbar-link contact-link"
href="#Your-articles">Your
Articles</a></li>
</ul>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</nav>
</header>
<main>
<section id="about-us-section">
<div class="about-us-container">
<h2 class="aboutus-heading">About Us</h2>
<p>
<strong class="subheading"> Company Profile and Brand:
</strong>
GeeksforGeeks is a leading platform that provides computer
science resources and coding challenges
for programmers and technology enthusiasts,
along with interview and exam preparations for upcoming
aspirants. With a strong emphasis on enhancing coding
skills and knowledge, it has become a trusted destination
for over 12 million plus registered users worldwide.
The platform offers a vast collection of tutorials,
practice problems, interview tutorials, articles, and courses,
covering various domains of computer science.
Our exceptional mentors hailing from top colleges &
organizations have the ability to guide you on a
journey
from the humble beginnings of coding to the pinnacle of
expertise. Under their guidance watch your
skills
flourish as we lay the foundation and help you conquer the
world of coding.
Our brand is built on the pillars of expertise,
accessibility, and community. We strive to empower
individuals
to enhance their programming skills, to bridge the gap
between academia and industry, and provide a
supportive
community to the learners. GeeksforGeeks is committed to
promoting technological advancement and
providing
opportunities for growth in the ever-evolving field of
computer science.
</p>
</div>
</section>
<footer>
<p>© 2024 Responsive Top Navigation Menu with CSS and
JavaScript . All rights reserved.</p>
</footer>
<script src="script.js"></script>
</body>
</html>
/* Write CSS Here */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--header-green-color: #36ed22;
--aboutus-background-green-color: rgb(28, 225, 97);
--heading-color: #000;
--primary-color: #2162e3;
--heading-a-tag-color: #fff;
--heading-a-tag-hover-color: #212121;
--all-h2-color: #000;
--aboutus-strong-color: #000;
--aboutus-p-tag-color: #201f1f;
--aboutus-border-color: rgb(28, 225, 97);
--body-bg-color: rgb(28, 225, 97);
}
body {
font-family: Arial, sans-serif;
background-color: var(--body-bg-color);
line-height: 1.6;
overflow-x: hidden;
}
.brand-logo-name {
text-decoration: none;
color: #fff;
font-size: 1.75rem;
padding: 5px;
}
a {
text-decoration: none;
color: var(--heading-a-tag-color);
transition: color 0.3s ease;
}
a:hover {
color: var(--heading-a-tag-hover-color);
}
.header {
padding: 1.6rem 4.8rem;
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--header-green-color);
box-shadow: 0px 0px 20px 0px rgba(132, 144, 255, 0.2);
width: 100%;
height: 10vh;
}
.header img {
height: 30px;
padding-top: 8px;
}
.navbar-lists {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
}
.navbar-lists li {
margin-right: 20px;
}
.navbar-lists li:last-child {
margin-right: 0;
}
.navbar-link {
color: var(--heading-a-tag-color);
padding: 10px;
transition: background-color 0.3s;
}
.icon {
display: none;
}
.navbar-lists li:nth-child(1) i {
color: rgb(221, 228, 215);
}
.navbar-lists li:nth-child(2) i {
color: rgb(33, 105, 239);
}
.navbar-lists li:nth-child(3) i {
color: rgb(11, 12, 11);
}
.navbar-lists li:nth-child(4) i {
color: rgb(241, 148, 19);
}
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
@media screen and (max-width: 768px) {
.icon {
display: flex;
position: absolute;
top: 20px;
left: 20px;
z-index: 999;
color: #fff;
font-size: 24px;
cursor: pointer;
flex-direction: row-reverse;
}
.navbar-lists {
display: flex;
position: fixed;
top: 10%;
left: -100%;
background-color: var(--header-green-color);
width: 40%;
height: 100vh;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
transition: left 0.3s ease;
z-index: 998;
padding-left: 40px;
}
.navbar-lists.responsive {
left: 0;
margin-right: 2rem;
}
.navbar-lists.responsive li {
margin: 10px 0;
}
.navbar-link {
padding: 5px 20px;
text-align: left;
width: 100%;
}
.navbar-link i {
display: none;
}
}
#about-us-section {
background: var(--aboutus-background-green-color);
text-align: center;
width: 100%;
margin: 0 auto;
margin-bottom: 3rem;
padding-bottom: 20px;
border: 3px solid var(--aboutus-border-color);
border-radius: 5px;
}
.dark-mode #about-us-section {
border: none;
}
.about-us-container {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}
h2 {
color: var(--all-h2-color);
}
.subheading {
color: var(--aboutus-strong-color);
}
.about-us-container p {
font-size: 1.125rem;
line-height: 1.6;
color: var(--aboutus-p-tag-color);
text-align: left;
}
.about-us-container p:first-of-type {
margin-top: 0;
}
.about-us-container p:last-of-type {
margin-bottom: 0;
}
@media screen and (max-width: 768px) {
.aboutus-heading {
font-size: 2rem;
}
.about-us-container p {
font-size: 1rem;
}
}
footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 20px 0;
position: fixed;
bottom: 0;
width: 100%;
}
function myFunction() {
let x = document.getElementById("myTopnav");
if (x.classList.contains("responsive")) {
x.classList.remove("responsive");
} else {
x.classList.add("responsive");
}
}
Output:
