JSFiddle - React, Tailwind, and code Playground

by sarathsprakash

HTML

<nav id="nav-wrap">
    <div id="menu-icon"><img src="../img/menu.png"/></div>
        <ul id="nav">
        <li><a href="default.htm">Home</a></li>
        <li><a href="obstacles.htm">Obstacles</a></li>
        <li><a href="location.htm">Location</a></li>
        <li><a href="register.htm">Register</a></li>
        <li><a href="sponsor.htm">Sponsor</a></li>
        <li><a href="volunteer.htm">Volunteer</a></li>
        <li><a href="faqs.htm">FAQs/Documents</a></li>
        </ul>
        </nav>

CSS

#nav {
    text-align:center;
    font-size:1em;
    text-transform:uppercase;
    font-weight:900;
    margin:1em auto;
    display:block;
}
#nav li {
    display:inline;
    text-align:center;
    margin:1em 2em;
}
#menu-icon {
    display:none;
}
@media screen and (max-width:1500px) {
#menu-icon {
    width:30px;
    height:30px;
    cursor:pointer;
    display:block;
    margin:0em auto 1em auto;
}
#nav {
    clear:both;
    z-index:10000;
    padding:5px;
    background:#000;
    border:solid 1px #f1f1eb;
    display:none;
}
}

JavaScript

$("#menu-icon").on("click", function(){
        $("#nav").slideToggle();
        $(this).toggleClass("active");
    });