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.

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 - [email protected]

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