Crear una barra de navegación fija es una forma estupenda de mejorar la experiencia de navegación en tu sitio web. Pero, ¿cómo se crea una barra de navegación adhesiva con CSS?
A continuación encontrarás las instrucciones paso a paso, con fragmentos de código que puedes copiar fácilmente en tu sitio web de WordPress:
1. Configurar la estructura HTML
Empieza por configurar una estructura HTML básica. Esto incluye un elemento <header> para la barra de navegación y un <section> para el contenido.
htmlKopier kode<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sticky Navbar</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="navbar">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<section class="content">
<h1>Scroll Down</h1>
<p>Content goes here...</p>
<p>More content here...</p>
<p>Keep scrolling to see the sticky effect in action.</p>
</section>
</body>
</html>
2. CSS para un estilo básico
Añade el siguiente CSS para dar estilo a la barra de navegación y al contenido. Esto configura la apariencia antes de hacerla adhesiva.
cssKopier kode/* styles.css */
/* Reset basic styling */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
.navbar {
background-color: #333;
color: white;
padding: 10px 0;
text-align: center;
}
.navbar ul {
list-style: none;
display: flex;
justify-content: center;
}
.navbar li {
margin: 0 15px;
}
.navbar a {
color: white;
text-decoration: none;
font-weight: bold;
}
/* Content section styling */
.content {
padding: 50px;
background-color: #f4f4f4;
height: 2000px; /* For demonstration purposes */
}
3. Haz que la barra de navegación sea adhesiva
Para que la barra de navegación se mantenga en la parte superior al desplazarte, añade la propiedad position: sticky.
cssKopier kode/* Make navbar sticky */
.navbar {
position: sticky;
top: 0;
z-index: 1000; /* Keeps the navbar above other content */
}
4. Cómo funciona la Posición Pegajosa
position: sticky: Esta propiedad CSS mantiene el elemento en su posición relativa hasta que se alcanza una determinada posición de desplazamiento, tras lo cual se mantiene en una posición especificada (comotop: 0).top: 0: Define a qué distancia de la parte superior debe sobresalir la barra de navegación.z-index: 1000: Garantiza que la barra de navegación se mantenga por encima de otros elementos.
5. Mejoras adicionales (Opcional)
Para mejorar la estética, puedes añadir un efecto de sombra y una transición de color de fondo.
cssKopier kode/* Optional enhancements */
.navbar {
box-shadow: 0 4px 2px -2px gray;
transition: background-color 0.3s ease;
}
.navbar.sticky {
background-color: #222;
}
6. Código HTML y CSS final
A continuación encontrarás el código completo para tu barra de navegación adhesiva.
HTML
htmlKopier kode<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sticky Navbar</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header class="navbar">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<section class="content">
<h1>Scroll Down</h1>
<p>Content goes here...</p>
<p>More content here...</p>
<p>Keep scrolling to see the sticky effect in action.</p>
</section>
</body>
</html>
CSS
cssKopier kode/* styles.css */
/* Reset basic styling */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
}
.navbar {
background-color: #333;
color: white;
padding: 10px 0;
text-align: center;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 4px 2px -2px gray;
transition: background-color 0.3s ease;
}
.navbar ul {
list-style: none;
display: flex;
justify-content: center;
}
.navbar li {
margin: 0 15px;
}
.navbar a {
color: white;
text-decoration: none;
font-weight: bold;
}
.navbar.sticky {
background-color: #222;
}
/* Content section styling */
.content {
padding: 50px;
background-color: #f4f4f4;
height: 2000px;
}
7. Implementación en WordPress
Para añadir este código a tu sitio web WordPress:
- Código HTML:
- Utiliza el bloque HTML personalizado en el editor de WordPress.
- Pega el código HTML dentro de este bloque donde quieras que aparezcan la barra de navegación y el contenido.
- Código CSS:
- Ve a tu panel de control de WordPress.
- Ve a Apariencia > Personalizar > CSS adicional.
- Pega ahí el código CSS.
8. ¡Ya estás listo!
Ahora tienes una barra de navegación adhesiva funcional en tu sitio web. Siéntete libre de personalizar los estilos para adaptarlos al diseño de tu sitio.
