My navbar menu with two differents formats/styles

Question

I have a navbar menu with two styles:

• First one is a tranparent menu. I use it when the page charges.
• Second one is a scroll and responsive (not yet) menu.

I use jquery to transform the first menu to the second one because they have two different fully styles, but I don't know if this will affect to general page charge...

This is my code (use full page):

$(document).ready(function () {
 $('#navegador-adaptativo').hide();
 $('#navegador-incial').show();
 $('#boton-menu-responsive').click(function () {
 $('#boton-menu-responsive').toggleClass('rotar');
 });
 $(window).scroll(function () {
 if ($(document).scrollTop() > 220) {
 $('#navegador-incial').hide();
 $('#navegador-adaptativo').show();
 $('#navegador-adaptativo-contenido ul li a.underline').addClass('anim-underline');
 }
 else {
 $('#navegador-adaptativo').hide();
 $('#navegador-incial').show();
 $('#navegador-adaptativo-contenido ul li a.underline').removeClass('anim-underline');
 }
 });
 });

body,html {
 width: 100%;
 height: 2000px;
 min-height: 470px;
 min-width: 300px;
 position: relative;
 font-family: 'Open Sans', Arial, sans-serif;
 background: red !important;
 }
 
 header {
 display: block;
 width: 100%;
 background: linear-gradient(rgba(0, 0, 0, 0.77), transparent);
 }
 
 #navegador-incial {
 height: 220px;
 width: 96%;
 padding-bottom: 20px;
 border-bottom: 3px solid white;
 position: relative;
 left: 50%;
 transform: translate(-50%, 0%);
 }
 
 .contenedor-logo {
 height: 100%;
 padding: 0;
 margin: 0;
 padding-top: 5px;
 padding-bottom: 5px;
 }
 
 #logo-grande {
 height: 100%;
 }
 
 #logo-min {
 height: 90%;
 }
 
 #navegador-inicial-contenido {
 height: 100%;
 float: right;
 }
 
 #navegador-inicial-contenido ul {
 height: 100%;
 }
 
 #navegador-inicial-contenido ul li a {
 padding-top: 0;
 padding-bottom: 0;
 padding-right: 10px;
 padding-left: 10px;
 text-transform: uppercase;
 font-weight: 600;
 color: white;
 font-size: 15px;
 }
 
 #navegador-inicial-contenido ul li a:focus {
 background-color: inherit;
 }
 
 #navegador-inicial-contenido ul li a:hover {
 background-color: inherit;
 text-shadow: 0px 1px 26px rgb(255, 254, 255);
 }
 
 #entrar {
 margin: 0;
 background-color: transparent;
 border: 2px solid white;
 cursor: pointer;
 color: white;
 font-size: 15px;
 padding: 16px 31px;
 text-decoration: none;
 text-shadow: 0px 1px 0px #2f6627;
 text-transform: uppercase;
 font-weight: 600;
 letter-spacing: 1px;
 border-radius: 0px;
 }
 
 #idioma {
 width: 40px;
 }
 
 #entrar:hover {
 background-color: white;
 color: #091d3e;
 text-decoration: none;
 }
 
 #entrar:active {
 position: relative;
 top: 1px;
 text-decoration: none;
 }
 
 #navegador-adaptativo {
 position: fixed;
 background: #091d3e;
 width: 100%;
 height: 90px;
 }
 
 #navegador-adaptativo-contenido {
 position: relative;
 }
 
 #navegador-adaptativo-contenido ul li a {
 line-height: 74px;
 font-size: 15px;
 color: white;
 padding-right: 10px;
 padding-left: 10px;
 text-transform: uppercase;
 font-weight: 600;
 position: relative;
 }
 
 #navegador-adaptativo-contenido ul li a:focus {
 background-color: inherit;
 }
 
 #navegador-adaptativo-contenido ul li a:hover {
 background-color: inherit;
 text-shadow: 0px 1px 26px rgb(255, 254, 255);
 }
 
 .boton-centrado {
 position: relative;
 top: 50%;
 transform: translate(0%, -50%);
 }
 
 .anim-underline:before {
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 width: 0;
 height: 2px;
 width: 100%;
 background-color: white;
 animation: width 0.5s;
 transform: scaleX(0);
 transition: all 0.4s;
 border-radius: 1px;
 }
 
 .anim-underline:hover:before {
 transform: scaleX(1);
 }
 
 .subrayado:before {
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 height: 2px;
 width: 100%;
 background-color: white;
 animation: width 0.5s;
 transform: scaleX(0);
 transition: all 0.4s;
 border-radius: 1px;
 text-shadow: -1px 1px 11px rgba(255, 255, 255, 1);
 }
 
 .subrayado:link:before {
 transform: scaleX(1);
 }
 
 .subrayado {
 text-shadow: -1px 1px 11px rgba(255, 255, 255, 1);
 }
 
 #boton-menu-responsive {
 border: 3px solid white;
 color: white;
 font-size: 30px;
 width: 55px;
 height: 55px;
 position: relative;
 padding: 0;
 }
 
 #boton-menu-responsive span {
 position: relative;
 line-height: 0px;
 top: 50%;
 transform: translate(0%, -50%);
 }
 
 .rotar {
 transform: rotate(90deg);
 }
 
 @media (min-width: 768px) and (max-width: 1199px) {}
 
 @media (max-width: 992px) {}
 
 @media (max-width: 480px) {}

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Menu con transparencia</title>
 <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800">
 <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Montserrat:300">
 <!--########################## - CSS - ##########################-->
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
 <link href="https://use.fontawesome.com/releases/v5.0.7/css/all.css" rel="stylesheet">
</head>
<body>
 <header>
 <nav id="navegador-incial">
 <div class="contenedor-logo navbar-brand">
 <a href=""> <img id="logo-grande" src="IMAGENES/siade_1tinta_a.png"></a>
 </div>
 <div id="navegador-inicial-contenido" class="navbar-nav">
 <ul class="nav align-items-end">
 <li class="nav-item"> <a id="seccion-caracteristicas" class="nav-link" href="#caracteristicas">Características</a> </li>
 <li class="nav-item"> <a id="seccion-casos-estudio" class="nav-link" href="#casos-estudio">Casos de Estudio</a> </li>
 <li class="nav-item"> <a id="seccion-noticias" class="nav-link" href="#noticias">Noticias</a> </li>
 <li class="nav-item"> <a id="seccion-colaboradores" class="nav-link" href="#colaboradores">Colaboradores</a> </li>
 <li class="nav-item"> <a id="seccion-contacto" class="nav-link" href="#contacto">Contacto</a> </li>
 <li class="nav-item">
 <a href="eng.html" class="nav-link"><img id="idioma" src="IMAGENES/esen.png" alt="Versión en inglés."></a>
 </li>
 <li id="zonaEntrar" class="nav-item">
 <button id="entrar" type="submit" class="btn btn-default" onClick="location.href='login.php'"><span class="fas fa-user"></span> Entrar</button>
 </li>
 </ul>
 </div>
 </nav>
 <nav id="navegador-adaptativo" class="navbar navbar-expand-lg ">
 <div class="contenedor-logo">
 <a href=""><img id="logo-min" src="IMAGENES/siade_1tinta_a_peque.png"> </a>
 </div>
 <button id="boton-menu-responsive" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navegador-adaptativo-contenido" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> <span class="fas fa-bars"></span> </button>
 <div id="navegador-adaptativo-contenido" class="collapse navbar-collapse">
 <ul class="nav ml-auto">
 <li class="nav-item"> <a id="seccion-caracteristicas" class="nav-link underline" href="#caracteristicas">Características</a> </li>
 <li class="nav-item"> <a id="seccion-casos-estudio" class="nav-link underline" href="#casos-estudio">Casos de Estudio</a> </li>
 <li class="nav-item"> <a id="seccion-noticias" class="nav-link underline" href="#noticias">Noticias</a> </li>
 <li class="nav-item"> <a id="seccion-colaboradores" class="nav-link underline" href="#colaboradores">Colaboradores</a> </li>
 <li class="nav-item"> <a id="seccion-contacto" class="nav-link underline" href="#contacto">Contacto</a> </li>
 <li class="nav-item">
 <a href="eng.html" class="nav-link"><img id="idioma" src="IMAGENES/esen.png" alt="Versión en inglés."></a>
 </li>
 <li class="nav-item">
 <button id="entrar" type="submit" class="btn btn-default boton-centrado" onClick="location.href='login.php'"><span class="fas fa-user"></span> Entrar</button>
 </li>
 </ul>
 </div>
 </nav>
 </header>
 <section></section>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>
</html>

Sorry for Spanish words...

What do you think? I accept recommendations.

• Sumurai8: I don't have time right now to write a full review, but you may want to look at an answer I wrote recently. Several things I wrote there also apply here: codereview.stackexchange.com/a/193199/91381