My navbar menu with two differents formats/styles

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty margin-bottom:0;

up vote
2
down vote

favorite

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.

edited Apr 28 at 16:03

asked Apr 28 at 12:10

Pelayo

133

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
â€“Â Sumurai8
May 1 at 7:10

add a commentÂ |Â

up vote
2
down vote

favorite

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.

edited Apr 28 at 16:03

asked Apr 28 at 12:10

Pelayo

133

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
â€“Â Sumurai8
May 1 at 7:10

add a commentÂ |Â

up vote
2
down vote

favorite

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.

edited Apr 28 at 16:03

asked Apr 28 at 12:10

Pelayo

133

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.

$(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>

$(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>

edited Apr 28 at 16:03

asked Apr 28 at 12:10

Pelayo

133

edited Apr 28 at 16:03

asked Apr 28 at 12:10

Pelayo

133

asked Apr 28 at 12:10

Pelayo

133

asked Apr 28 at 12:10

Pelayo

133

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
â€“Â Sumurai8
May 1 at 7:10

add a commentÂ |Â

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
â€“Â Sumurai8
May 1 at 7:10

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
â€“Â Sumurai8
May 1 at 7:10

add a commentÂ |Â

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function ()
return StackExchange.using("mathjaxEditing", function ()
StackExchange.MarkdownEditor.creationCallbacks.add(function (editor, postfix)
StackExchange.mathjaxEditing.prepareWmdForMathJax(editor, postfix, [["\$", "\$"]]);
);
);
, "mathjax-editing");

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "196"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: false,
noModals: false,
showLowRepImageUploadWarning: true,
reputationToPostImages: null,
bindNavPrevention: true,
postfix: "",
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fcodereview.stackexchange.com%2fquestions%2f193143%2fmy-navbar-menu-with-two-differents-formats-styles%23new-answer', 'question_page');

);

Post as a guest

Name

active

oldest

votes

draft saved

draft discarded

draft saved

draft discarded

Post as a guest

Name

搜尋此網誌

trjhtr