DEV Community

Cover image for Glassmorphic Nav bar tutorial (+JS dark toggle)
Lens
Lens

Posted on

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>
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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:



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

Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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');
})
Enter fullscreen mode Exit fullscreen mode



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 👋.

Top comments (5)

Collapse
 
louiecodes profile image
L O U I S

Looks nice!

Collapse
 
duncanteege profile image
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!

Collapse
 
lensco825 profile image
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!

Collapse
 
ianwijma profile image
Ian Wijma

Loving the article!

Collapse
 
gloriousreborne profile image
Glorious

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