Glassmorphic Nav bar tutorial (+JS dark toggle)

Here's a small tutorial on how to make a glassmorhic nav bar that also has a dark mode toggle! Here's how it'll look:

Creating the nav

In our html we make a div (or a nav element because i like landmarks) containing our content, which could be paragraph elements, a dark mode toggle icon, and a button. In our CSS we give the nav a display of flex so it can be horizontal, then we code align-item: center to align the content to the center and justify-content: space-evenly to space out each element in the nav evenly. I also added a profile picture which is a small image with a border-radius of 50% for fun.

HTML

<nav>
<img src="https://i.pinimg.com/474x/10/cd/a9/10cda9e715b2b6799908fefbacae4d6b.jpg">
 <p>Home</p>
  <p>About</p>
<p>Docs</p>
 <ion-icon class="darkToggle" name="moon-outline"></ion-icon>
<button>Sign Up</button>
</nav>

CSS

nav {
  display: flex;
  justify-content: space-around;
  width: 70%;
  align-items: center;
  border-radius: 8px;
  font-family: Poppins;
  border-radius: 10px;
  transition: 0.3s;
}

/*Profile Picture*/
nav > img {
  border-radius: 50%;
  width: 40px;
}

Styling the nav

For this tutorial i used hyp4academys glassmorphism generator to make my nav's background glassmorphic, but if you want to actually learn how to make a glassmorphic background can without a tool look at this blog post:

How to implement glassmorphism with CSS

Matt Angelosanto for LogRocket ・ Apr 20 '22

#css

i styled the button to have a background color of black with white text, but that'll change on our darkmode ;). I gave the button a height of 30 pixels so its not to small. Lastly i gave each element in the nav a cursor of pointer so it gives the user the thought that this will bring them somewhere.

nav {
  display: flex;
  justify-content: space-around;
  width: 70%;
  align-items: center;
  border-radius: 8px;
  font-family: Poppins;
  background: rgba( 255, 255, 255, 0.4 );
backdrop-filter: blur( 5px );
-webkit-backdrop-filter: blur( 5px );
border-radius: 10px;
  transition: 0.3s;
}

nav > img {
  border-radius: 50%;
  width: 40px;
}

nav > button {
  height: 30px;
  border-radius: 5px;
  border: none;
  background-color: black;
  color: white;
  font-family: Poppins;
}

nav > p, nav > button, ion-icon {
  cursor: pointer;
}

Dark toggle

First we make a dark nav class where it has a dark background and a dark button class with a white background and black text. With Javascript we store the nav, dark toggle button icon, and sign up button into a variable. Finally we give the dark toggle an event listener where when its clicked the dark nav and dark button class will be toggles onto the nav and button.

CSS

.darkNav {
  background: rgba( 0, 0, 0, 0.25 );
  color: white;
}

.darkButton {
  background-color: white;
  color: black;
}

JS

var nav = document.querySelector('nav');
var darkToggle = document.querySelector('.darkToggle');
var button = nav.querySelector('button');

darkToggle.addEventListener('click', () => { 
nav.classList.toggle('darkNav');
button.classList.toggle('darkButton');
})