Responsive Navbar in CSS

#html #css #javascript #webdev

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

Let's get started...

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 -

* {
    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.

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

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

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

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

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

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

* {
    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 -

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