Glassmorphic Nav bar tutorial (+JS dark toggle)
Tags: webdev, css, tutorial, html
Published: 2023-03-08 12:00:00

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:
{% codepen https://codepen.io/lensco825/pen/vYzeLKy %}

##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

```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

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

```
<hr>
##Styling the nav
For this tutorial i used [hyp4academys glassmorphism generator](https://hype4.academy/tools/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:
{% embed https://dev.to/logrocket/how-to-implement-glassmorphism-with-css-19g1#stacking-and-nesting-glassmorphic-elements %}
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.

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

```
<hr>
##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

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

.darkButton {
  background-color: white;
  color: black;
}
```
####JS

```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');
})
```
<hr>
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 👋.
{% twitter https://twitter.com/Lensco13/status/1633256989240315911 %}