Open In App

How to Create a Responsive Top Navigation Menu with CSS & JavaScript?

Last Updated : 13 May, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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.

compressed_Screenshot-_422_
Preview

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

HTML 
<!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>&copy; 2024 Responsive Top Navigation Menu with CSS and
                JavaScript . All rights reserved.</p>
        </footer>

        <script src="script.js"></script>

</body>

</html>
CSS 
/* 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%;
}
JavaScript 
function myFunction() {
    let x = document.getElementById("myTopnav");
    if (x.classList.contains("responsive")) {
        x.classList.remove("responsive");
    } else {
        x.classList.add("responsive");
    }
}

Output:


Next Article
How to Create a Responsive Top Navigation Menu with CSS & JavaScript?
author
skaftafh
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox