0

Estoy haciendo una pagina web para moviles con la siguiente estructura en Angular:

La idea es que la navbar permanesca en su sitio es decir, en el top aunque se dezplace uno en la pagina, es decir solo se haria scroll en las secciones del router outlet, sin embargo esto no pasa asi cuando dezplazo hacia abajo, la navbar se va con el resto y no se queda, ya intente a mano y con bootstrap, y nada

en app-navbar-landing cargo una navbar responsive con la propiedad fixed-top todo con bootstrap, mientras que en el router-outlet cargo mis distintos componentes dependiendo la navbar, esto si funciona el problema es que quiero que se quede fija cuando doy scroll pero se oculta o mas bien se queda arriba, la pagina que cargo es la siguiente:

<div class="contenedor">
<div class="lobby">
  <div class="video"></div>
  <div class="lobby-title" data-aos="zoom-in-up">Titulo</div>
</div>
<div class="links">
 <div class="box" data-aos="fade-right">
   <div class="img"></div>
   <div class="title">opcion a </div>
 </div>
 <div class="box" data-aos="fade-left">
   <div class="img"></div>
   <div class="title">opcion b</div>
  </div>
</div>

mis estilos principales son estos:

.contenedor{
  margin-top: 60px;
  width: 100%;
}

.lobby{
  background-color: rgba(0, 0, 0, 0.36);
  width: 100%;
  height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
 }

Y mi navbar en el otro lado es este:

<nav class="navbar navbar-expand-lg bg-body-tertiary fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
  <ul class="navbar-nav me-auto mb-2 mb-lg-0">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled" aria-disabled="true">Disabled</a>
    </li>
   </ul>
  </div>
 </div>
 </nav>

Si acaso modifique la altura de nav a 60px, no entiendo que pasa no se si choca algun otro estilo o que

1

1 respuesta 1

0

Encontrar la solucion no fue facil el problema era una libreria de estilos que me modificaba el resto, les sugiero ir depurando librerias y estilos cuando tengan algun problema de esto para saber desde donde estuvo mal, cuando funcionaba bien y asi encontrar el problema, asi lo hice yo y funciono..!

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.