1

Estoy construyendo un menu y queria agregarle la propiedad de position:fixed para que se mantenga siempre fijo a la hora de hacer scroll en mi pagina, sin embargo, a la hora de agregarselo, mi barra de menu desaparece y no entiendo a que se debe, pensaba que podria tratarse de que a la hora de agregar otra sección, la barra de menu era tapado por el fondo de la página, pero no. Adjunto el codigo que empleo (estoy desarrollando la web con angular). Si es necesario otro componente lo adjunto también.

nav {
  display: flex;
  justify-content: space-around;
  align-items: center; /* Alinea los elementos del flexbox sobre el eje horizontal */
  background-color: rgb(44, 42, 42);
  padding: 5px;
  height: 90px;
  font-weight: bold;
  font-size: 22px;
  color: white;

  .titulo {
    transition: transform 0.5s;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .3s;
  }

  .titulo:hover {
    background-size: 100% 2px;
  }

  .enlaces ul {
    display: flex;
    gap: 5px; /* Añade una separación entre cada uno de los elementos includios en el flexbox */
    margin: 0; /* Elimina el margen que por defecto incluye el ul */
    padding: 0; /* Elimina el margen que por defecto incluye el ul */
  }

  .enlaces ul li {
    list-style: none;
    padding-right: 12px;
  }

  .enlaces ul li a {
    text-decoration: none;
    color: white;
    padding: 5px;
    border-radius: 10px;
  }

  .enlaces ul li a:hover {
    background-color: blueviolet;
    border-radius: 10px;
    transition: 0.5s;
  }
}
<nav>
    <div class="titulo">
      <p>< titulo /></p>
    </div>
    <div class="enlaces">
      <ul>
        <li><a href="#">enlace 1</a></li>
        <li><a href="#">enlace 2</a></li>
        <li><a href="#">enlace 3</a></li>
        <li><a href="#">enlace 4</a></li>
      </ul>
    </div>
  </nav>

1
  • Buen día, ¿En qué parte estás agregando position: fixed;? No se aprecia en tu código Commented el 26 ene. 2023 a las 5:29

1 respuesta 1

1

Si colocas position: fixed en el nav funciona como es de esperar. Además, debes colocar al menos los left,top y right

body{
  background-color: #e5e5f7;
opacity: 0.8;
background-image:  linear-gradient(#444cf7 1px, transparent 1px), linear-gradient(to right, #444cf7 1px, #e5e5f7 1px);
background-size: 20px 20px;
 height:4000px;

}
nav {
 position:fixed;
 top:5px;
 left:5px;
 right:5px;
 
  display: flex;
  justify-content: space-around;
  align-items: center; /* Alinea los elementos del flexbox sobre el eje horizontal */
  background-color: rgb(44, 42, 42);
  padding: 5px;
  height: 90px;
  font-weight: bold;
  font-size: 22px;
  color: white;
}
  .titulo {
    transition: transform 0.5s;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .3s;
    
  }

  .titulo:hover {
    background-size: 100% 2px;
  }

  .enlaces ul {
    display: flex;
    gap: 5px; /* Añade una separación entre cada uno de los elementos includios en el flexbox */
    margin: 0; /* Elimina el margen que por defecto incluye el ul */
    padding: 0; /* Elimina el margen que por defecto incluye el ul */
  }

  .enlaces ul li {
    list-style: none;
    padding-right: 12px;
  }

  .enlaces ul li a {
    text-decoration: none;
    color: white;
    padding: 5px;
    border-radius: 10px;
  }

  .enlaces ul li a:hover {
    background-color: blueviolet;
    border-radius: 10px;
    transition: 0.5s;
  }
}
<body>
 <nav>
    <div class="titulo">
      <p>< titulo /></p>
    </div>
    <div class="enlaces">
      <ul>
        <li><a href="#">enlace 1</a></li>
        <li><a href="#">enlace 2</a></li>
        <li><a href="#">enlace 3</a></li>
        <li><a href="#">enlace 4</a></li>
      </ul>
    </div>
  </nav>
  <content>
    Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
  <content>
<body>

Como verá en el ejemplo anterior el bloque content que sigue a continuación del menú, queda por debajo de él. Esto sucede porque al tener position:fixed, el menú sale del flujo normal del documento. Una solución es dar un margen superior al texto, o mejor aún cambiar fixed por sticky

body{
  background-color: #e5e5f7;
opacity: 0.8;
background-image:  linear-gradient(#444cf7 1px, transparent 1px), linear-gradient(to right, #444cf7 1px, #e5e5f7 1px);
background-size: 20px 20px;
 height:4000px;

}
nav {
 position:sticky;
 top:5px;
 left:5px;
 right:5px;
 
  display: flex;
  justify-content: space-around;
  align-items: center; /* Alinea los elementos del flexbox sobre el eje horizontal */
  background-color: rgb(44, 42, 42);
  padding: 5px;
  height: 90px;
  font-weight: bold;
  font-size: 22px;
  color: white;
}
  .titulo {
    transition: transform 0.5s;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .3s;
    
  }

  .titulo:hover {
    background-size: 100% 2px;
  }

  .enlaces ul {
    display: flex;
    gap: 5px; /* Añade una separación entre cada uno de los elementos includios en el flexbox */
    margin: 0; /* Elimina el margen que por defecto incluye el ul */
    padding: 0; /* Elimina el margen que por defecto incluye el ul */
  }

  .enlaces ul li {
    list-style: none;
    padding-right: 12px;
  }

  .enlaces ul li a {
    text-decoration: none;
    color: white;
    padding: 5px;
    border-radius: 10px;
  }

  .enlaces ul li a:hover {
    background-color: blueviolet;
    border-radius: 10px;
    transition: 0.5s;
  }
}
<body>
 <nav>
    <div class="titulo">
      <p>< titulo /></p>
    </div>
    <div class="enlaces">
      <ul>
        <li><a href="#">enlace 1</a></li>
        <li><a href="#">enlace 2</a></li>
        <li><a href="#">enlace 3</a></li>
        <li><a href="#">enlace 4</a></li>
      </ul>
    </div>
  </nav>
  <content>
    Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum.
  <content>
<body>

1
  • Oh perfecto, ahora lo he entendido, muchas gracias, me has ayudado mucho!
    – Puntoycoma
    Commented el 26 ene. 2023 a las 7:41

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.