{"id":6057,"date":"2024-10-08T14:55:39","date_gmt":"2024-10-08T14:55:39","guid":{"rendered":"https:\/\/outstandingthemes.com\/como-crear-una-barra-de-navegacion-adhesiva-con-css\/"},"modified":"2024-11-27T21:48:57","modified_gmt":"2024-11-27T21:48:57","slug":"como-crear-una-barra-de-navegacion-adhesiva-con-css","status":"publish","type":"post","link":"https:\/\/outstandingthemes.com\/es\/como-crear-una-barra-de-navegacion-adhesiva-con-css\/","title":{"rendered":"C\u00f3mo crear una barra de navegaci\u00f3n adhesiva con CSS:"},"content":{"rendered":"\n

Crear una barra de navegaci\u00f3n fija es una forma estupenda de mejorar la experiencia de navegaci\u00f3n en tu sitio web. Pero, \u00bfc\u00f3mo se crea una barra de navegaci\u00f3n adhesiva con CSS<\/a>? <\/p>\n\n

A continuaci\u00f3n encontrar\u00e1s las instrucciones paso a paso, con fragmentos de c\u00f3digo que puedes copiar f\u00e1cilmente en tu sitio web de WordPress:<\/p>\n\n

1. Configurar la estructura HTML<\/h2>\n\n

Empieza por configurar una estructura HTML b\u00e1sica. Esto incluye un elemento <header><\/code> para la barra de navegaci\u00f3n y un <section><\/code> para el contenido. <\/p>\n\n

htmlKopier kode<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\">\n  <title>Sticky Navbar<\/title>\n  <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n  <header class=\"navbar\">\n    <nav>\n      <ul>\n        <li><a href=\"#\">Home<\/a><\/li>\n        <li><a href=\"#\">About<\/a><\/li>\n        <li><a href=\"#\">Services<\/a><\/li>\n        <li><a href=\"#\">Contact<\/a><\/li>\n      <\/ul>\n    <\/nav>\n  <\/header>\n\n  <section class=\"content\">\n    <h1>Scroll Down<\/h1>\n    <p>Content goes here...<\/p>\n    <p>More content here...<\/p>\n    <p>Keep scrolling to see the sticky effect in action.<\/p>\n  <\/section>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n
\n\n
2. CSS para un estilo b\u00e1sico<\/h2>\n\n
A\u00f1ade el siguiente CSS para dar estilo a la barra de navegaci\u00f3n y al contenido. Esto configura la apariencia antes de hacerla adhesiva. <\/p>\n\n
cssKopier kode\/* styles.css *\/\n\n\/* Reset basic styling *\/\n* {\n  margin: 0;\n  padding: 0;\n  box-sizing: border-box;\n}\n\nbody {\n  font-family: Arial, sans-serif;\n  line-height: 1.6;\n}\n\n.navbar {\n  background-color: #333;\n  color: white;\n  padding: 10px 0;\n  text-align: center;\n}\n\n.navbar ul {\n  list-style: none;\n  display: flex;\n  justify-content: center;\n}\n\n.navbar li {\n  margin: 0 15px;\n}\n\n.navbar a {\n  color: white;\n  text-decoration: none;\n  font-weight: bold;\n}\n\n\/* Content section styling *\/\n.content {\n  padding: 50px;\n  background-color: #f4f4f4;\n  height: 2000px; \/* For demonstration purposes *\/\n}\n<\/code><\/pre>\n\n
\n\n
3. Haz que la barra de navegaci\u00f3n sea adhesiva<\/h2>\n\n
Para que la barra de navegaci\u00f3n se mantenga en la parte superior al desplazarte, a\u00f1ade la propiedad position: sticky<\/code>.<\/p>\n\n
cssKopier kode\/* Make navbar sticky *\/\n.navbar {\n  position: sticky;\n  top: 0;\n  z-index: 1000; \/* Keeps the navbar above other content *\/\n}\n<\/code><\/pre>\n\n
\n\n
4. C\u00f3mo funciona la Posici\u00f3n Pegajosa<\/h2>\n\n