I have two menus, one is invisible to see the content below (as long as the responsive design allows it) and another with a dark blue background, which will be the browser to use when the screens are not so large or Scrolling down.
I'm doing the responsive design and when I get to the "collapse" of the content, I've realized that if you press the button and open that menu, the elements move up ...
Could you help me?
Deputy code:
//Evento cuando el DOM cargue el contenido:
$(document).ready(function () {
//Si hay un scroll de 150px o más y la ventana tiene un ancho menor de 1199px: mostrar nav azul
if ($(document).scrollTop() > 150 && $(window).width() < 1199) {
$('#first-nav').css("display", "none");
$('#second-nav').css("display", "flex");
}
//Si hay un scroll menor de 150px y una anchura de ventana mayor de 1199px: mostrar nav transparete
else if ($(document).scrollTop() < 150 && $(window).width() > 1199) {
$('#second-nav').css("display", "none");
$('#first-nav').css("display", "block");
}
});
//Evento al realizar un scroll:
$(window).scroll(function () {
//Si la anchura del navegador es mayor de 1199px:
if ($(window).width() > 1199) {
//Si hay un scroll de mas de 150px: mostrar nav azul
if ($(document).scrollTop() > 150) {
$('#first-nav').css("display", "none");
$('#second-nav').css("display", "flex");
}
//Si hay un scrol menor que 150px: mostrar: nav transparente
else if ($(document).scrollTop() < 150) {
$('#second-nav').css("display", "none");
$('#first-nav').css("display", "block");
}
}
}); body,
html {
width: 100%;
height: 2000px;
min-height: 470px;
min-width: 300px;
position: relative;
}
body {
font-family: 'Open Sans', Arial, sans-serif;
background: green !important;
}
header {
width: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.77), transparent);
}
#first-nav {
height: 220px;
width: 96%;
padding-bottom: 20px;
border-bottom: 3px solid white;
position: relative;
left: 50%;
transform: translate(-50%, 0%);
transition: all 0.4s;
}
.logo-content {
height: 100%;
padding: 0;
margin: 0;
padding-top: 5px;
padding-bottom: 5px;
}
#logo {
height: 100%;
}
#first-nav-content {
height: 100%;
float: right;
}
#first-nav-content ul {
height: 100%;
}
#first-nav-content 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;
transition: all 0.4s;
}
#first-nav-content ul li a:focus {
background-color: inherit;
}
#first-nav-content ul li a:hover {
background-color: inherit;
text-shadow: 0px 1px 26px rgb(255, 254, 255);
transition: all 0.4s;
}
#idioma {
width: 40px;
}
#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;
}
#entrar:hover {
background-color: white;
color: #091d3e;
text-decoration: none;
}
#entrar:active {
position: relative;
top: 1px;
text-decoration: none;
}
#second-nav {
position: fixed;
background: #091d3e;
width: 100%;
height: 90px;
display: none;
transition: all 0.4s;
}
#collapse-nav {
}
.logo-content-2 {
height: 50px;
}
#collapse-nav ul li a {
line-height: 74px;
font-size: 14px;
color: white;
padding-right: 10px;
padding-left: 10px;
text-transform: uppercase;
font-weight: 600;
position: relative;
}
#collapse-nav ul li a:focus {
background-color: inherit;
}
#collapse-nav ul li a:hover {
background-color: inherit;
text-shadow: 0px 1px 26px rgb(255, 254, 255);
transition: all 0.4s;
}
.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);
}
#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 (max-width: 1199px) {
#first-nav {
display: none;
}
#second-nav {
display: flex;
}
#collapse-nav ul li a {
font-size: 13px;
}
#entrar {
font-size: 13px;
}
}
@media (max-width: 991px) {
#second-nav ul{
display: block;
}
}
@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="first-nav">
<div class="logo-content navbar-brand">
<a href=""> <h1 id="logo">LOGO</h1></a>
</div>
<div id="first-nav-content" 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="second-nav" class="navbar navbar-expand-lg">
<div class="logo-content-2 navbar-brand">
<a href=""><h1 id="logo">LOGO</h1> </a>
</div>
<button id="boton-menu-responsive" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapse-nav" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> <span class="fas fa-bars"></span> </button>
<div id="collapse-nav" class="collapse navbar-collapse">
<ul class="nav ml-auto">
<li class="nav-item"> <a id="seccion-caracteristicas" class="nav-link anim-underline" href="#caracteristicas">Características</a> </li>
<li class="nav-item"> <a id="seccion-casos-estudio" class="nav-link anim-underline" href="#casos-estudio">Casos de Estudio</a> </li>
<li class="nav-item"> <a id="seccion-noticias" class="nav-link anim-underline" href="#noticias">Noticias</a> </li>
<li class="nav-item"> <a id="seccion-colaboradores" class="nav-link anim-underline" href="#colaboradores">Colaboradores</a> </li>
<li class="nav-item"> <a id="seccion-contacto" class="nav-link anim-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>