<body> <div class="topnav"> <!-- Centered link --> <div class="topnav-centered"> <a href="#" class="logo"> <img src="growmade2.png" style="height: 25px; width: 250px" alt="" /> </a> </div> <!-- Left-aligned links (default) --> <a href="#news">SHOP</a> <a href="#contact">EXPLORE</a> <!-- Right-aligned links --> <div class="topnav-right"> <a href="#search">MY CART</a> </div> </div>**CSS**
.topnav { position: sticky; display: block; background-color: rgb(255, 255, 255); padding: 30px 80px 30px 50px; } .topnav a { font-family: "Roboto", sans-serif; font-family: "Roboto Condensed", sans-serif; font-family: "Source Sans Pro", sans-serif; font-weight: 900; display: inline-block; position: relative; color: #000; text-align: left; margin: 0 10px; padding-bottom: 2px; text-decoration: none; }Hola soy nuevo en css. Quiero crear un sitio web con una barra de navegación estática pero no puedo mostrarlo estático. ¿Alguien puede resolver este problema? ¡¡¡Gracias por adelantado!!!
Bueno, podría usar la posición fija para hacer que una barra de navegación sea pegajosa. p.ej:
.topnav { position: fixed; top: 0; z-index: 99; }Necesitas agregar top: 0 :
body { margin: 0; padding:0; } .topnav { position: sticky; top: 0; display: block; background-color: rgb(255, 255, 255); padding: 30px 80px 30px 50px; } .topnav a { font-family: "Roboto", sans-serif; font-family: "Roboto Condensed", sans-serif; font-family: "Source Sans Pro", sans-serif; font-weight: 900; display: inline-block; position: relative; color: #000; text-align: left; margin: 0 10px; padding-bottom: 2px; text-decoration: none; } <div class="topnav"> <!-- Centered link --> <div class="topnav-centered"> <a href="#" class="logo"> <img src="growmade2.png" style="height: 25px; width: 250px" alt="" /> </a> </div> <!-- Left-aligned links (default) --> <a href="#news">SHOP</a> <a href="#contact">EXPLORE</a> <!-- Right-aligned links --> <div class="topnav-right"> <a href="#search">MY CART</a> </div> </div> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p> <p>text</p>prueba esto :
para barra de navegación pegajosa en la posición superior
.topnav { position: sticky; top:0; }