JSFiddle - React, Tailwind, and code Playground

by ajai jothi

HTML

<ul class="nav justify-content-center">
        <li><a id="menu-btn"><img src="img/menu-icon.png" alt=""></a></li>
        <li class="nav-item">
            <a id="logo-lc" class="nav-link active" href="index">
                <img src="img/logo-lc.svg" width="60px" />
            </a>
        </li>
        <li class="nav-item" id="li-services">
            <a class="nav-link" href="services">Services</a>
        </li>
        <li class="nav-item" id="li-creations">
            <a class="nav-link" href="creations">Créations</a>
        </li>
        <li class="nav-item" id="li-presentation">
            <a class="nav-link" href="presentation">Présentation</a>
        </li>
        <li class="nav-item" id="li-contact">
            <a class="nav-link" href="contact">Contact</a>
        </li>
    </ul>

CSS

@media screen and (max-width: 600px) {
  .nav li{
    width: 100%;
    text-align: center;
  }
  .nav li a{
    display: inline-block;
  }
  .nav #li-services, .nav #li-creations, .nav #li-presentation, .nav #li-contact{
    display: none;
  }
  #menu-btn{
    position: absolute;
    top: 19px;
    left: 19px;
    z-index: 99;
  }
  #menu-btn img{
    max-width: 32px;
    z-index: 99;
    cursor: pointer;
  }
}

JavaScript

window.onscroll = function() {console.log('in'); scrollFunction()};

function scrollFunction() {
  // if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
    document.getElementByClassName("ul")[0].style.height = "60px";
    document.getElementsByTagName("li a").style.padding = "0px 10px";
    document.getElementById("menu-btn").style.top = "8px";
  // }
}

$(function () {
  $(document).scroll(function () {
    var $nav = $(".nav");
    $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
  });
});