company logo

Before you start

Components List

Navigation

Data Display

Forms

Creating a Responsive Navigation Bar with HTML, CSS, and Javascript

What you'll learn

  • Proper HTML semantics for creating a NavBar
  • How to use flexbox to create the basic layout
  • DOM Manipulation
  • CSS Media Queries/Responsiveness

Prerequisites

  • Basic HTML, CSS, and Javascript
  • Some knowledge on media queries
  • Completed the Navbar with Dropdown tutorial

React verison coming soon!

The Code

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Static Site</title>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
     <nav>
            <p>Logo</p>
            <div class="right-cont">
                <ul class="nav-links">
                    <li><a href="/home">Home</a></li>
                    <li><a href="/about">About</a></li>
                    <li><a href="/blog">Blog</a></li>
                </ul>
                <div class="button-cont">
                    <button class="sign-in-btn">Sign in</button>
                    <button>Sign up</button>
                </div>
            </div>
            <span class="hamburger">&#9776;</span>
        </nav>
        <div class="mobile-nav">
            <ul class="mobile-links">
                <li><a href="/home">Home</a></li>
                <li><a href="/about">About</a></li>
                <li><a href="/blog">Blog</a></li>
            </ul>
            <div class="button-cont">
                <button class="sign-in-btn">Sign in</button>
                <button>Sign up</button>
            </div>
            <span class="close-btn">&times</span>
        </div>
        <script src="script.js"></script>
    </body>
    </html>
Open on CodeSandboxOpen Sandbox

* If the component preview isn't loading, try refreshing the page.

* You can adjust the size of the code preview and code by draging the sides!

Explanation

HTML

  • Keeping the same code from our original Navbar, we will add a few things. First, a hamburger menu at the end of our <nav> tag. Second, a mobile nav will appear once we click on the hamburger menu. Both of these will be hidden and only appear at the correct screen size!

CSS

  • We will style our mobile nav container to look like a mobile menu, using Flexbox to create the base layout. We will position the menu absolute to the viewport, pushing it all the way to the top right(where it will appear when summoned). The menu will be hidden by default.
  • We will create an active class as well for our mobile nav to appear when clicked.
  • Now, our media queries! This will control what we will see with different screen sizes. The one we created translates too: anything below 768px, hide our right navigation links, show the hamburger menu(hidden by default), and show our mobile nav.

Javascript

  • We will first store our HTML elements in the DOM: our hamburger icon, mobile nav, and close button.
  • For both the hamburger icon and close button, we will add and remove the class respectively when each is clicked
  • Finally, we add an event listener for our window to listen for a window resize. If our window becomes greater than 768(what we defined in our CSS), we will hide the mobile nav when it is opened.

Resources

Made by Sam Kotecha

linkedin logo