JSFiddle - React, Tailwind, and code Playground

by yash009

HTML

<div id="mobile-nav" style="height: 0;">
    <div id="mobile-nav-wrapper">
        <nav>
            <ul>
                <li class= "active-link">
                    <a href="/">Home</a>
                </li>
                <li>   
                    <a href="/about">About</a>   
                </li>
                <li>  
                    <a href="/services">Services</a>     
                </li>
                <li> 
                    <a href="/gallery">Gallery</a>     
                </li>
                <li>
                    <a href="/contact">Contact</a>  
                </li>
            </ul>
        </nav>
    </div>
</div>

CSS

@media only screen and (max-width: 992px) {

#canvas {
    max-width: 100%;
    margin: 0;
    padding: 0px;
}

#desktop-navbar {
    display: none;
}

#mobile-nav-wrapper {
    float: none;
    width: 90%;
}
#mobile-nav {
    overflow: hidden;
    text-align: center;
    margin-left: 15%;
    padding-top: 15px;
    display: inline-block;
    width: 78%;
}

#mobile-nav li {
    font-size: 18px;
    text-decoration: none;
    display: inline-block;
    margin-left: 25px;
}

#mobile-nav li:hover {
    color: #379683;
}

#mobile-nav-wrapper {
    padding-bottom: 1em;
    border-bottom: 1px solid #000;
}

#mobile-menu-link {
    border-bottom: 1px solid #000;
    text-align: center;
    width: 70%;
    margin-left: 15%;   
    padding: 5px 0;
    padding-bottom: 10px;
    display: block;
}

#mobile-menu-link:hover {
    cursor: pointer;
}

#mobile-menu-link p:hover {
    background-color: #379683;
    color: #fff;
}

#mobile-menu-link p {
    width: 81%;
    margin-left: 10%;
    padding: 25px 0; 
}
}

@media only screen and (max-width: 768px) {

#mobile-nav li {
    padding: 5px 0px;
    font-size: 18px;
    text-decoration: none;
    display: block;
    margin-right: 7%;
}
}

JavaScript

var menu = document.getElementById("mobile-menu-link");
var mobileNav = document.querySelector("#mobile-nav");

function dropdownMenu(menu){
    menu.addEventListener("click", function(){
        if (mobileNav.style.height == "0px") {
            if ($(window).width() < 768) {
                mobileNav.style.height = "180px";
            } else if ($(window).width() < 992) {
                mobileNav.style.height = "45px";
            }
        } else {
           mobileNav.style.height = "0px";
        }
    })
}

function navbarResize(mobileNav) {
    if($(window).width() < 768 && mobileNav.style.height == "45px") {
        mobileNav.style.height = "180px !important";
    }
}

dropdownMenu(menu);

navbarResize(mobileNav);