JSFiddle - React, Tailwind, and code Playground

HTML

<a href="index.html"><img id="logo" src="imgs/logo.png"></a>
    <a href="quem_somos.html"><div id="langMobile">EN<br>&#8595;<br>Pt</div></a>

                <div id="btnMobile">
                    <img src="imgs/mobileBtn.jpg">
                </div>
                <ul>
                    <li id="lang"><a id="PT" href="quem_somos.html">PT</a> / <a id="EN" href="#">EN</a>

                    </li>   <a href="news.html"><li>News</li></a>
    <a href="logistics.html"><li>Logistics</li></a>
    <a href="services.html"><li>Services</li></a>
    <a href="#"><li>About Us</li></a>

                </ul>

JavaScript

function resizeFunc()
{
    if ($(window).width() > 800) {
        $('#upBar, nav').hover(function () {
            $('#upBar, nav ul').stop(true).animate({
                height: '60px'
            }, 200);
        });
        
        
        $('#upBar, nav').mouseleave(function () {
            $('#upBar, nav ul').stop(true).animate({
                height: '45px'
            }, 200);
        });
    }
}
$(document).ready(function () {
    resizeFunc();    
    $(window).resize(function() {
          if ($(window).width() > 800) {
              resizeFunc();
          } else {
            $('#upBar, nav').unbind("hover");
            $('#upBar, nav').unbind("mouseleave");  
          }
      })
  })