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');
})

---

That's all for now, thanks for reading! I also wanted to tell you that i'm now on Twitter where i'll show my progress, projects, and achievements! (I also heard that its good toc be on social media to have more job oppertunities) Have a nice day/night 👋.

Comments

[L O U I S]

Looks nice!

[Duncan Teege]

Loving this tutorial! However, one small idea is that I think it would look cool if the moon changed into a sun and vice versa depending on the theme!

[Lens]

Yeah I always think about that when i add dark mode toggles to my websites, but since I use icons it can be hard to change them since you can't access their shape. I plan on learning how to do that using svg's!

[Ian Wijma]

Loving the article!

[Glorious]

Great thread, i just followed you.. kindly follow back!