0

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

1
  • Se me ocurre que podrías posicionar de forma absoluta el collapse, de esta forma haría un overlay sobre el demás contenido, que además, debería estar en posición relativa. Commented el 30 jul. 2020 a las 16:30

2 respuestas 2

1

Una forma puede ser darle al nav:

position:absolute y z-index=1 

y al div que se encuentra a continuación del nav: margin-top:56px (la altura del nav)

0

Tu código HTML tiene algún tag sin cerrar (por ejemplo header). Lo he re-estructurado un poco para que la parte de navegación sea independiente. A parte, ya que usas Bootstrap puedes fijar la barra de navegación en la parte superior añadiendo la clase fixed-top, tal como se indica en la documentación.

<nav class="navbar navbar-expand-lg navbar-light bg-light custom-bg fixed-top">

De todas formas te he preparado una demo usando tu código como base.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.