header{
width: 100%;
height: 480px;
background-color:blue;
padding: 10px;
background-size: cover;
margin-bottom: 55px;
}
#logo{
display: block;
margin:auto;
}
nav{
width:100%;
display:flex;
align-items: center ;
justify-content: center;
background: rgb(255, 255, 255);
margin-top: 20px;
}
nav a{
color: black;
float: right;
font-size: 16px;
display: block;
padding: 14px 16px;
text-decoration: none;
font: 20px 'Quicksand', sans-serif;
}
nav a:hover{
background-color: #2ECCFA;
}
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<body>
<div class="container-fluid ">
<div class="row">
<header >
<nav class="navbar navbar-expand-lg navbar-light bg-light custom-bg">
<ul class="navbar-nav d-block d-lg-none ml-auto mr-3">
<li class="nav-item">
</li>
</ul>
<button class="navbar-toggler custom-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navbar-nav mx-auto order-0" id="navbarSupportedContent">
<ul class="navbar-nav mx-auto order-0">
<li class="nav-item">
<a href="#">Historia</a>
</li>
<li class="nav-item">
<a href="#">Servicios</a>
</li>
<li class="nav-item">
<a href="#">Instalaciones</a>
</li>
<li class="nav-item">
<a href="#">Galeria</a>
</li>
<li class="nav-item">
<a href="#">Clientes</a>
</li>
<li class="nav-item">
<a href="#">Contacto</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="contenedor-logo col-lg-12 col-md-12 col-sm-12 col-xs-12">
<a href="index.html"><img src="http://lorempixel.com/g/200/200/" id="logo" class="img-fluid" ></a>
</div>
</div>
</div>
<div id="redes">
<i class="fab fa-facebook-square fa-2x "></i>
<i class="fab fa-instagram fa-2x "></i>
<i class="fab fa-youtube fa-2x "></i>
</div>
</div>
</div>
</header>
</body>
</html>
Tengo un menú hecho con bootstrap y funciona correctamente pero el problema es que cuando está en versión móvil (al desplegarse una vez abierto )hace que tanto el logo(usé una imagen de lorem pixel) y las redes sociales (a la izquierda) se desplacen quedando fuera del header azul ,lo que quiero lograr es que al abrir el menú el logo y redes queden como están inicialmente y que no se desplacen para que no queden fuera del header como ocurre,si no que queden por "detrás" Intenté con el css pero no logro que ambos queden dentro del header mientras esta abierto el menú (en versión colapsada),quiero evitar que se desplacen ya que me cambiaría toda la demás estructura con la que estoy trabajando por debajo de éste header