DEV Community

loading...
Cover image for How I made this cool Responsive Navigation Bar!

How I made this cool Responsive Navigation Bar!

hima_khaitan profile image Himanshu ・5 min read

Websites! We all love making websites that are built from small components and sections. One such component is Navbar. Making a Navbar is easy but making a responsive Navbar can be trouble for some of the newcomers.

In this project, we will be building a cool responsive Navbar along with learning some of the ADVANCED CSS PROPERTIES. The project. The project will nail down the fundamentals of making a RESPONSIVE NAVBAR

Design Inspiration: Jonas Schmedtmann

Live Demo:

Setting Up The Files

In the project, folders make these three files accordingly.

- Index.html
- Styles.css
- App.js
Enter fullscreen mode Exit fullscreen mode

Linking the Files

Your stater index.html should be similar to the one shown Below.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Navigation Bar</title>
  </head>
  <body>
 <script src="./app.js"></script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Clearing the Predefined Browser Styles

Every Browser has its own predefined CSS styles such as margin, padding, and many more which may interrupt our design. So to get rid of it configure the CSS FILE as shown below.

*,
*::after,
*::before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
body {
  /* This Converts 1rem = 16px from 1rem = 10px */
  font-size: 62.5%;
}
Enter fullscreen mode Exit fullscreen mode

Now we have linked the CSS and JS files with your HTML and ready to go.

Writing the Markup

We will be using BEM Notation to name our CSS classes. You can read more about Here.

<nav class="nav">
      <!-- Main Container -->
      <div class="logo">
        <!-- Logo -->
        <img
          src="https://raw.githubusercontent.com/himakhaitan/Natours/main/img/logo-white.png"
          alt="Logo"
          class="logo-img"
        />
      </div>
      <div class="hamburger">
        <!-- Mobile Hamburger -->
          <div class="line"></div>
      </div>
      <div class="nav-items">
        <!-- Desktop Menu Bar -->
        <ul class="navigation__list">
          <li class="navigation__item">
            <a href="" class="navigation__link"><span>01</span>About Me</a>
          </li>
          <li class="navigation__item">
            <a href="" class="navigation__link"><span>02</span>Popular Repos</a>
          </li>
          <li class="navigation__item">
            <a href="" class="navigation__link"><span>03</span>Contact Me</a>
          </li>
          <li class="navigation__item">
            <a href="" class="navigation__link"><span>04</span>Github</a>
          </li>
          <li class="navigation__item">
            <a href="" class="navigation__link"><span>05</span>Hire Me</a>
          </li>
        </ul>
      </div>
    </nav>
Enter fullscreen mode Exit fullscreen mode

Styling

Basic CSS

You can use any background image you want. You can find the image used by me here.

body {
  margin: 1rem;
  height: 100vh;
  font-family: "Lato", sans-serif;
  background-repeat: no-repeat;
  background-image: linear-gradient(
      to left,
      rgba(40, 180, 133, 0.8),
      rgba(85, 197, 122, 0.8),
      rgba(126, 213, 111, 0.8)
    ),
url("https://raw.githubusercontent.com/himakhaitan/Natours/main/img/hero.jpg");
  background-size: cover;
}
Enter fullscreen mode Exit fullscreen mode

Styling the nav container

We have used grid to get the required structure.

.nav {
  margin-top: 1rem;
  width: 100%;
  padding: 1rem 2rem;
  display: grid;
  grid-template-columns: 1fr max-content;
}
Enter fullscreen mode Exit fullscreen mode

Styling the child containers

.logo-img {
  width: 5rem;
}
.nav-items {
  margin-left: auto;
}
.hamburger {
  display: none;
}
Enter fullscreen mode Exit fullscreen mode

Styling the Nav Items

image

.navigation__list {
  display: flex;
  list-style: none;
  align-items: center;
  height: 100%;
}
.navigation__item {
  font-size: 1rem;
  letter-spacing: 0.3rem;
  font-weight: 500;
}
.navigation__link {
color: #fff;
}
.navigation__link > span {
  display: none;
}
Enter fullscreen mode Exit fullscreen mode

Styling the Hover Effect

The main purpose of the styles is to increase the background area and on hover decrease it. Alongside it had styled background which when animated gives the desired results.

.navigation__item {
  transition: all 0.4s;
}
.navigation__link {
  background-image: linear-gradient(
    120deg,
    transparent 0%,
    transparent 50%,
    #fff 50%
  );
  background-size: 250%;
  padding: 1rem 1.5rem;
  transition: all 0.4s;
  position: relative;
}
.navigation__link:hover,
.navigation__link:active {
  background-position: 100%;
  color: rgba(85, 197, 122, 1);
  transform: translateX(1rem);
}
Enter fullscreen mode Exit fullscreen mode

Styling the Hamburger

For the style of Hamburger, we will be using pseudo-elements. ::after and ::before are the required pseudo-elements.

.line {
  position: relative;
}

.line,
.line::after,
.line::before {
  content: "";
  background-color: #fff;
  width: 2rem;
  display: inline-block;
  height: 0.2rem;
  border-radius: 12px;
  left: 0;
  transition: all 0.3s;
}
.line::after {
  top: -0.8rem;
  position: absolute;
}
.line::before {
  top: 0.8rem;
  position: absolute;
}
.checked > .line::after {
  top: 0;
  transform: rotate(135deg);
}
.checked > .line::before {
  top: 0;
  transform: rotate(-135deg);
}
.checked > .line {
    background-color: transparent;
}
Enter fullscreen mode Exit fullscreen mode

.checked CSS class is applied to the Hamburger when it is clicked and the navbar is opened. The class helps the Hamburger to convert its shape into a X.
Crossed Hamburger

Making the Navbar Responsive

Further CSS code will be written under a Media Query which will be from max-width: 1000px.

@media screen and (max-width: 1000px) {
.nav-items {
    position: fixed;
    top: 0;
    left: 0;
    background-image: linear-gradient(
      to right bottom,
      rgba(40, 180, 133, 1),
      rgba(85, 197, 122, 1),
      rgba(126, 213, 111, 1)
    );
    height: 100vh;
    width: 100%;
}
.navigation__list {
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    padding: 10rem 0;
  }
  .navigation__link > span {
    display: inherit;
    margin-right: 0.4rem;
  }

  .hamburger {
    display: flex;
    align-items: center;
    margin-left: auto;
    z-index: 100;
    cursor: pointer;
  }
  .navigation__item:hover {
    transform: translateX(8px);
  }
}
Enter fullscreen mode Exit fullscreen mode

Making the navbar Animated

clip-path is the property that we will be using to make the Navbar Opening Animated.

clip-path is a relatively new property hence some of the browsers don't support it so it must be prefixed as shown below in the code.

 .nav-items {
   clip-path: circle(10rem at 90% -30%);
    -webkit-clip-path: circle(10rem at 90% -30%);
    transition: all 0.5s ease-out;
  }
  .nav-items.open {
    clip-path: circle(70rem at 90% -30%);
    -webkit-clip-path: circle(70rem at 90% -30%);
  }
Enter fullscreen mode Exit fullscreen mode

circle() property allows us to create a mask on the nav-items which will be animated when a class .open is toggled on the div with class nav-items.

Adding the Functionality

We need to select the following divs to apply the toggle behavior.

  <div class="hamburger"></div>
       <!-- And -->
<div class="nav-items"></div>

Enter fullscreen mode Exit fullscreen mode

For selecting a div with a class we write
document.querySelector(".class") This will give us the div with the required class.

Now all the toggle behavior will start once the hamburger is clicked so we will attach an event listener to it as shown below.

document.querySelector('.hamburger').addEventListener('click', () => {
    document.querySelector('.nav-items').classList.toggle('open')
    document.querySelector('.hamburger').classList.toggle('checked');
});

Enter fullscreen mode Exit fullscreen mode

Hurrah! We have made the navigation bar.

If you face any difficulty in making this. I will be more than happy to help you out with it.

Original Project:

GitHub logo himakhaitan / Natours

A tour booking Portal

Natours Project


Profile Image

Introduction


This tour booking portal is made to give user an experience to book the tours and bring recreation to their life.

Tech Stack


NODE HTML CSS SASS

Installation


No such Installation is required. Although to process code following commands are used:-

To Compile SASS

npm run compile:sass

To Comile and Watch SASS

npm run start

To Concat CSS

npm run concat:css

To Prefix CSS

npm run prefix:css

To Compress CSS

npm run compress:css

To Build Css

i.e To Concat, Prefix & Compress CSS

npm run build:css

Happily turning COFFEE into CODE!

Can you help me?

As You can see the original project didn't have any backend functionality. Can any of you can guys suggest any idea or can code along with me. I would highly appreciate if you can leave feedback, criticism or suggestion of any kind.

Repo Link: Natours

It will also be appreciated if you fork the repo and help me out with the Backend!

If you're interested in contributing, the project is open-source and I would appreciate any sort of help. Otherwise, you can share it or star the repo, if you want to of course.

Happily Turning Coffee ☕ into code 💻.

For website hosting you may use Bluehost

Discussion (2)

Collapse
evonux profile image
Djordje Stevanovic • Edited

Would be great if you have credit to the actual creator github.com/jonasschmedtmann
He has an amazing course teaching how to build this website, including the backend 🎉

Collapse
hima_khaitan profile image
Himanshu Author • Edited

Thanks, you noticed!
But actually, the point is his design and mine are totally different!
As far as I remember his code logic was also different!
Hope you see the difference.
Although I have given the Inspiration credits!

Forem Open with the Forem app