Responsive Navbar in CSS
Tags: html, css, javascript, webdev
Published: 2022-09-05 09:59:15

Hello Guys today i will show you how to create a responsive navbar with HTML, CSS and Javascript.

Let's get started...

# HTML -
```html
<nav class="navbar">
      <div class="brand-title">Brand Name</div>
      <a href="#" class="toggle-button">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </a>
      <div class="navbar-links">
        <ul>
            <li>
                <a href="#">Home</a>
            </li>
            <li>
                <a href="#">Contact</a>
            </li>
            <li>
                <a href="#">About</a>
            </li>
        </ul>
      </div>
    </nav>
```

* We have wrapped everything in nav tag and provided the class of navbar to it.
* Then we have created 1 div for the logo or brand name , 1 anchor tag to use it as a toggle button for small screens or mobile view and inside it we have created 3 span tags to create bars for the hamburger icons, 1 div for the navigation links which contains the links of the navbar.


# CSS -

```css
* {
    box-sizing:border-box;
}

body {
    margin: 0;
    padding: 0;
}
```
* The box-sizing property allows us to include the padding and border in an element's total width and height. 
* Removing the default padding and margin of the body.

```css
.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background-color:#333;
    color:white;
}
```
* Making the navbar flex , and provide the space between them so , brand name will be on the left at one end and links will be on the right on the other end.
* Align items will align the items vertically.

```css
.brand-title{
    font-size: 1.5rem;
    margin:.5rem
}

.navbar-links ul{
    margin:0;
    padding: 0;
    display:flex;
}

.navbar-links li{
    list-style: none;
}

.navbar-links li a{
    text-decoration: none;
    color: white;
    padding:1rem;
    display:block
}

.navbar-links li:hover{
    background-color:#555;
}
```
* Styling the brand element and removing the default margin and padding of ul tag and making it display flex.
* Styling the links and anchor tags and removing the default behaviour.


```css
.toggle-button{
    position:absolute;
    top:.75rem;
    right: 1rem;
    display:none;
    flex-direction:column;
    justify-content: space-between;
    width:30px;
    height:21px;
}

.toggle-button .bar{
    height:3px;
    width:100%;
    background-color:white;
    border-radius:10px;
}
```
* Styling the toggle-button making it vertically columned so the bars inside it will be vertically aligned.
* Position absolute to make it stick to the right top end.
* display: none to hide it on larger screens.
* Styling the bars inside the toggle-button.

```css
@media screen and (max-width:600px) {
    .toggle-button{
        display:flex;
    }
    .navbar-links{
        display:none;
        width: 100%;
    }
}
```

* Using media queries to target the screens smaller than 600px
* Making the toggle-button flex when the screen size is smaller than 600px.
* Hiding the navbar links when the screen size is smaller than 600px.


```css
@media screen and (max-width:600px) {
.
.
.navbar{
        flex-direction:column;
        align-items: flex-start;
    }
    .navbar-links ul { 
        flex-direction:column;
        width: 100%;
    }
    .navbar-links ul li {
        text-align:center;
    }

    .navbar-links li a {
        padding: .7rem 1rem;
    }
}
```

* Making the Navbar vertically aligned using flex direction.
* Making the links vertically aligned using flex direction and make the element width to 100% to cover the entire row.
* Making the links centered using text-align property to li elements.

```css
@media screen and (max-width:600px) {
.
.
 .navbar-links.active{
        display:flex
   }
}
```
* Creating this active class styling to toggle it using javascript, when this class is toggled then the navbar on smaller screens will have a dropdown effect.

## Complete CSS code -
```css
* {
    box-sizing:border-box;
}

body {
    margin: 0;
    padding: 0;
}

.navbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    background-color:#333;
    color:white;
}

.brand-title{
    font-size: 1.5rem;
    margin:.5rem
}

.navbar-links ul{
    margin:0;
    padding: 0;
    display:flex;
}

.navbar-links li{
    list-style: none;
}

.navbar-links li a{
    text-decoration: none;
    color: white;
    padding:1rem;
    display:block
}

.navbar-links li:hover{
    background-color:#555;
}

.toggle-button{
    position:absolute;
    top:.75rem;
    right: 1rem;
    display:none;
    flex-direction:column;
    justify-content: space-between;
    width:30px;
    height:21px;
}

.toggle-button .bar{
    height:3px;
    width:100%;
    background-color:white;
    border-radius:10px;
}

@media screen and (max-width:600px) {
    .toggle-button{
        display:flex;
    }
    .navbar-links{
        display:none;
        width: 100%;
    }

    .navbar{
        flex-direction:column;
        align-items: flex-start;
    }
    .navbar-links ul { 
        flex-direction:column;
        width: 100%;
    }
    .navbar-links ul li {
        text-align:center;
    }

    .navbar-links li a {
        padding: .7rem 1rem;
    }

    .navbar-links.active{
        display:flex
    }
    
}
```

# Javascript - 
```js
const toggleButton = document.getElementsByClassName("toggle-button")[0];
const navbarLinks = document.getElementsByClassName("navbar-links")[0];

toggleButton.addEventListener("click",() => {
    navbarLinks.classList.toggle("active")
})
```
* Targeting the toggle-button and navbar-links using DOM.
* Then adding a click event to toggle button and toggling the "active" class using toggle() method.

THANK YOU FOR CHECKING THIS POST

You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/js-push-and-pop-with-arrays-33a2/edit

https://dev.to/shubhamtiwari909/tostring-in-js-27b

https://dev.to/shubhamtiwari909/join-in-javascript-4050

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90