JSFiddle - React, Tailwind, and code Playground

by _wilmer

HTML

<div id="header">
    <div class="logo">[logo]</div>
    <div class="menu"><b>[MENU]</b>

    </div> <a href="#contact" class="nav">contact</a>
 <a href="#crew" class="nav">crew</a>
 <a href="#about" class="nav">about</a>

</div>

CSS

#header {
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0;
    right: 0;
    color: black;
    background: grey;
    padding: 30px;
    z-index: 10;
}
.nav {
    display: block;
    float: right;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 2px;
    color: black;
    padding: 5px;
    margin: 5px;
}
.nav:hover {
    outline: 1px solid black;
}
.logo {
    float: left;
}
.menu {
    display: block;
    float: right;
    margin: -3px;
    cursor: pointer;
}
/* HEADER TINY */
 #header.tiny {
}
#header.tiny .logo {
    display: none;
}

JavaScript

$(document).ready(function () {
    $('.menu').click(function () {
        if ($('#header').is(".tiny")) {
            $('#header').animate({
                width: "100%",
                height: "100px",
                padding: "30px"
            }, 500, function () {
                $('#header').removeClass("tiny").find("a").fadeIn();
            });


        } else {
            $('#header').addClass("tiny").find("a").hide();
            $('#header').animate({
                width: "50px",
                height: "50px",
                padding: "5px"
            }, 500);
        }

    });

});