{"id":54386,"date":"2020-01-29T18:25:24","date_gmt":"2020-01-29T12:55:24","guid":{"rendered":"https:\/\/git-staging.wpastra.com\/?p=54386"},"modified":"2023-12-28T16:08:38","modified_gmt":"2023-12-28T10:38:38","slug":"sticky-headers-with-elementor","status":"publish","type":"post","link":"https:\/\/git-staging.wpastra.com\/es\/guides-and-tutorials\/sticky-headers-with-elementor\/","title":{"rendered":"C\u00f3mo crear cabeceras adhesivas Elementor - Gu\u00eda para principiantes"},"content":{"rendered":"<div id=\"bsf_rt_marker\"><\/div>\n<p>Una cabecera suele ser lo primero que ve un usuario cuando visita su sitio web y es la columna vertebral de c\u00f3mo un usuario navega por su sitio web.<\/p>\n\n\n\n<p>Tanto si tiene un sitio web de comercio electr\u00f3nico, un sitio personal, un sitio web educativo, un foro comunitario o un sitio web de medios de comunicaci\u00f3n. La cabecera facilita la navegaci\u00f3n y hace que sea un placer utilizarla.<\/p>\n\n\n\n<p>Hoy en d\u00eda, podemos ver c\u00f3mo muchos dise\u00f1adores web adoptan las cabeceras adhesivas como una forma de organizar y estructurar un sitio web para una mejor navegaci\u00f3n del usuario. En uno de nuestros art\u00edculos, ya hablamos de lo f\u00e1cil que es <a href=\"https:\/\/git-staging.wpastra.com\/es\/guides-and-tutorials\/design-custom-elementor-header\/\" target=\"_blank\" rel=\"noreferrer noopener\">crear cabeceras personalizadas con Elementor<\/a>.<\/p>\n\n\n\n<p>En este art\u00edculo, le mostraremos c\u00f3mo crear su propia cabecera adhesiva con <a href=\"https:\/\/git-staging.wpastra.com\/go\/elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor<\/a>.<\/p>\n\n\n\n<p>Si no lo sabe, con Elementor puede crear una cabecera adhesiva para su sitio web sin utilizar una sola l\u00ednea de c\u00f3digo.<\/p>\n\n\n\n<p>Empecemos.<\/p>\n\n\n\t\t\t\t<div class=\"wp-block-uagb-table-of-contents uagb-toc__align-left uagb-toc__columns-1  uagb-block-9cff5aed\"\n\t\t\t\t\tdata-scroll= \"1\"\n\t\t\t\t\tdata-offset= \"30\"\n\t\t\t\t\tstyle=\"\"\n\t\t\t\t>\n\t\t\t\t<div class=\"uagb-toc__wrap\">\n\t\t\t\t\t\t<div class=\"uagb-toc__title\">\n\t\t\t\t\t\t\tTabla de contenidos\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"uagb-toc__list-wrap\">\n\t\t\t\t\t\t<ol class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#how-to-create-sticky-headers-with-elementor\" class=\"uagb-toc-link__trigger\">C\u00f3mo crear cabeceras adhesivas con Elementor<\/a><ul class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#step-1-creating-your-menu\" class=\"uagb-toc-link__trigger\">Paso 1: Crear el men\u00fa<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#step-2-creating-your-header-in-elementor\" class=\"uagb-toc-link__trigger\">Paso 2: Creaci\u00f3n de la cabecera en Elementor<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#step-3-creating-a-header-template-in-elementor\" class=\"uagb-toc-link__trigger\">Paso 3: Creaci\u00f3n de una plantilla de cabecera en Elementor<\/a><li class=\"uagb-toc__list\"><li class=\"uagb-toc__list\"><a href=\"#step-4-how-to-make-your-elementor-header-sticky\" class=\"uagb-toc-link__trigger\">Paso 4: C\u00f3mo hacer que su cabecera Elementor sea adhesiva.<\/a><\/li><\/ul><\/li><li class=\"uagb-toc__list\"><a href=\"#make-your-elementor-sticky-header-much-more-stylish-using-custom-css\" class=\"uagb-toc-link__trigger\">Haz que tu cabecera adhesiva Elementor sea mucho m\u00e1s elegante usando CSS personalizado<\/a><li class=\"uagb-toc__list\"><a href=\"#different-header-design-options-for-elementor-users\" class=\"uagb-toc-link__trigger\">Diferentes opciones de dise\u00f1o de cabecera para usuarios de Elementor<\/a><li class=\"uagb-toc__list\"><a href=\"#conclusion\" class=\"uagb-toc-link__trigger\">Conclusi\u00f3n<\/a><\/ul><\/ol>\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\n\n\n<h2 class=\"wp-block-heading\">C\u00f3mo crear cabeceras adhesivas con Elementor<\/h2>\n\n\n\n<p>Las cabeceras adhesivas permiten al usuario acceder a la cabecera de la p\u00e1gina y a la secci\u00f3n del men\u00fa por mucho que se desplace hacia abajo.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Paso 1: Crear el men\u00fa<\/h3>\n\n\n\n<p>Para a\u00f1adir un encabezado adhesivo a su sitio web en primer lugar, es necesario crear <strong>Men\u00fa principal <\/strong>en su <em>wp-admin &gt; Apariencia &gt; Men\u00fas<\/em>. A\u00f1ada la secci\u00f3n que desea mostrar en la cabecera.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img fetchpriority=\"high\" decoding=\"async\" width=\"875\" height=\"622\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/main-menu-screenshot-elementor.png\" alt=\"Main Menu Screenshot on Elementor\" class=\"wp-image-54590\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/main-menu-screenshot-elementor.png 875w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/main-menu-screenshot-elementor-300x213.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/main-menu-screenshot-elementor-768x546.png 768w\" sizes=\"(max-width: 875px) 100vw, 875px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Paso 2: Creaci\u00f3n de la cabecera en Elementor<\/h3>\n\n\n\n<p>Despu\u00e9s de crear el men\u00fa principal, vaya a <a href=\"https:\/\/git-staging.wpastra.com\/es\/resources\/elementor-templates-free-downloads\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor <em>Plantillas<\/em><\/a><em> &gt; Creador de temas<\/em>. En la p\u00e1gina del constructor de temas seleccione <strong>Secci\u00f3n de cabecera<\/strong> y haga clic en <strong>\"A\u00f1adir nueva cabecera\".<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" width=\"160\" height=\"190\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/theme-builder-elementor-settings-1.png\" alt=\"Theme Builder Elementor Settings\" class=\"wp-image-54596\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img decoding=\"async\" width=\"740\" height=\"405\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/create-your-first-header-settings.png\" alt=\"Create Your First Header Elementor Settings\" class=\"wp-image-54597\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/create-your-first-header-settings.png 740w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/create-your-first-header-settings-300x164.png 300w\" sizes=\"(max-width: 740px) 100vw, 740px\" \/><\/figure>\n\n\n\n<p>En la pantalla emergente, d\u00e9 un <strong>nombre a la plantilla de cabecera<\/strong> y haga clic en <strong>\"Crear plantilla\".<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1001\" height=\"523\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/create-template-settings-elementor.png\" alt=\"Create Template Settings in Elementor\" class=\"wp-image-54598\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/create-template-settings-elementor.png 1001w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/create-template-settings-elementor-300x157.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/create-template-settings-elementor-768x401.png 768w\" sizes=\"(max-width: 1001px) 100vw, 1001px\" \/><\/figure>\n\n\n\n<p>Despu\u00e9s de eso, ser\u00e1s redirigido a la p\u00e1gina del editor Elementor. Aqu\u00ed podr\u00e1 <a href=\"https:\/\/git-staging.wpastra.com\/es\/guides-and-tutorials\/wordpress-customize-header\/\" target=\"_blank\" rel=\"noreferrer noopener\">elija una plantilla de cabecera predefinida<\/a> o cree el suyo propio desde cero.<\/p>\n\n\n\n<p>Para esta gu\u00eda, vamos a crear nuestra cabecera adhesiva Elementor desde cero.<\/p>\n\n\n\n<p>Antes de empezar a crear una plantilla, puedes ver algunos widgets de cabecera en el editor Elementor. Utilizando estas secciones podemos crear una cabecera de forma r\u00e1pida y sencilla.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"281\" height=\"426\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-widgets.png\" alt=\"Elementor Header Widgets\" class=\"wp-image-54599\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-widgets.png 281w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-widgets-198x300.png 198w\" sizes=\"(max-width: 281px) 100vw, 281px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Paso 3: Creaci\u00f3n de una plantilla de cabecera en Elementor<\/h3>\n\n\n\n<p>A\u00f1adir un <strong>estructura de dos columnas<\/strong>. Aseg\u00farese de que el ancho del contenido de la secci\u00f3n es \"<strong>En caja\".<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"278\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-structure-1024x278.png\" alt=\"Elementor Header Structure Settings\" class=\"wp-image-54600\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-structure-1024x278.png 1024w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-structure-300x81.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-structure-768x209.png 768w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-structure.png 1042w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"279\" height=\"542\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-edit-section-settings.png\" alt=\"Elementor Edit Section Content width Settings\" class=\"wp-image-54601\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-edit-section-settings.png 279w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-edit-section-settings-154x300.png 154w\" sizes=\"(max-width: 279px) 100vw, 279px\" \/><\/figure>\n\n\n\n<p>&nbsp;En virtud de la <strong>\"Columna \"Editar <\/strong>establecer el ancho de la primera columna en <strong>20%.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"278\" height=\"370\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-edit-column-settings.png\" alt=\"Elementor Edit Column Settings\" class=\"wp-image-54603\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-edit-column-settings.png 278w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-edit-column-settings-225x300.png 225w\" sizes=\"(max-width: 278px) 100vw, 278px\" \/><\/figure>\n\n\n\n<p>Ahora a\u00f1ada la direcci\u00f3n de su sitio web <strong>Logotipo del sitio<\/strong> a la primera columna, y seleccione alineaci\u00f3n a la izquierda.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"74\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/add-header-logo-1024x74.png\" alt=\"Add header logo elementor settings\" class=\"wp-image-54604\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/add-header-logo-1024x74.png 1024w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/add-header-logo-300x22.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/add-header-logo-768x56.png 768w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/add-header-logo.png 1064w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>En la segunda columna, a\u00f1ada un <strong>Men\u00fa de navegaci\u00f3n <\/strong>y seleccione el men\u00fa principal que cre\u00f3 en el paso 1. Alinee el men\u00fa de navegaci\u00f3n a la derecha.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"75\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/add-nav-menu-1024x75.png\" alt=\"Add nav menu elementor settings\" class=\"wp-image-54605\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/add-nav-menu-1024x75.png 1024w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/add-nav-menu-300x22.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/add-nav-menu-768x56.png 768w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/add-nav-menu.png 1065w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Para esta gu\u00eda, vamos a crear un encabezado sencillo. Puedes crear un dise\u00f1o m\u00e1s detallado para tu cabecera a\u00f1adiendo un color de fondo, efectos de animaci\u00f3n, botones y mucho m\u00e1s.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Paso 4: C\u00f3mo hacer que su cabecera Elementor sea adhesiva.<\/h3>\n\n\n\n<p>Despu\u00e9s de crear nuestra cabecera b\u00e1sica Elementor, ha llegado el momento de convertirla en una cabecera Sticky.<\/p>\n\n\n\n<p>Para ello, haga clic en el bot\u00f3n <strong>Editar secci\u00f3n<\/strong> (Toda la secci\u00f3n de cabecera). Ir a <strong><em>Avanzado &gt; Efectos de movimiento.<\/em><\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"413\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/motion-effects-settings-1024x413.png\" alt=\"Adding motion effects instructions\" class=\"wp-image-54606\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/motion-effects-settings-1024x413.png 1024w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/motion-effects-settings-300x121.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/motion-effects-settings-768x309.png 768w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/motion-effects-settings.png 1350w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>En efectos de movimiento, seleccione <strong>\"pegajoso hasta la cima\" <\/strong>y seleccione el <strong>\"dispositivos\"<\/strong> donde quieras mostrar la cabecera adhesiva y pulsa sobre el bot\u00f3n <strong>\"Publicar\" <\/strong>bot\u00f3n<strong>.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"278\" height=\"655\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/sticky-to-top-settings.png\" alt=\"Adding sticky to top settings instructions\" class=\"wp-image-54607\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/sticky-to-top-settings.png 278w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/sticky-to-top-settings-127x300.png 127w\" sizes=\"(max-width: 278px) 100vw, 278px\" \/><\/figure>\n\n\n\n<p>Tras la publicaci\u00f3n, Elementor le pide que <strong>A\u00f1adir una condici\u00f3n <\/strong>para su cabecera. B\u00e1sicamente, mediante la adici\u00f3n de condiciones que puede mostrar cabecera donde quieras en el sitio.<\/p>\n\n\n\n<p>Aqu\u00ed quer\u00edamos mostrar este encabezado en todo el sitio, excluyendo la P\u00e1gina 404. Por lo tanto, hemos incluido el <strong>Todo el sitio <\/strong>en el men\u00fa desplegable y <strong>P\u00e1gina 404 excluida<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"992\" height=\"658\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-publish-settings.png\" alt=\"Elementor publish settings to exclude 404 page\" class=\"wp-image-54608\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-publish-settings.png 992w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-publish-settings-300x199.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-publish-settings-768x509.png 768w\" sizes=\"(max-width: 992px) 100vw, 992px\" \/><\/figure>\n\n\n\n<p>Como puede ver, crear su cabecera adhesiva personalizada con Elementor es r\u00e1pido y sencillo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Haz que tu cabecera adhesiva Elementor sea mucho m\u00e1s elegante usando CSS personalizado<\/h2>\n\n\n\n<p>Elementor le da la libertad de personalizar una cabecera adhesiva para hacerla m\u00e1s elegante mediante <a href=\"https:\/\/git-staging.wpastra.com\/es\/guides-and-tutorials\/custom-css-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">a\u00f1adir la clase CSS<\/a>.<\/p>\n\n\n\n<p>Aqu\u00ed puede a\u00f1adir Altura, Color de fondo, Transici\u00f3n y Efectos adhesivos a la cabecera adhesiva.<\/p>\n\n\n\n<p>Para que tu cabecera adhesiva tenga m\u00e1s estilo, vuelve a la opci\u00f3n <strong><em>Editar secci\u00f3n<\/em><\/strong> (Toda la secci\u00f3n de cabecera). Ir a <em>Avanzado &gt; Efectos de movimiento<\/em><strong>.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"413\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/motion-effects-settings-1024x413.png\" alt=\"Adding motion effects instructions\" class=\"wp-image-54606\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/motion-effects-settings-1024x413.png 1024w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/motion-effects-settings-300x121.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/motion-effects-settings-768x309.png 768w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/motion-effects-settings.png 1350w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Aqu\u00ed conjunto <strong>\"Desplazamiento de efectos\" a 100<\/strong>. Esta es la distancia de desplazamiento en la que se produce el efecto de desplazamiento cuando un visitante utiliza su sitio web.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"277\" height=\"470\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/ehf-motion-offset-settings.jpg\" alt=\"Motion offset settings set to 100\" class=\"wp-image-61348\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/ehf-motion-offset-settings.jpg 277w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/ehf-motion-offset-settings-177x300.jpg 177w\" sizes=\"(max-width: 277px) 100vw, 277px\" \/><figcaption class=\"wp-element-caption\">Desplazamiento de movimiento ajustado a 100<\/figcaption><\/figure>\n\n\n\n<p>Ahora despl\u00e1cese hacia abajo y haga clic en <strong>\"CSS personalizado\"<\/strong>. A\u00f1ade la clase CSS que aparece a continuaci\u00f3n. Puede editar este CSS para a\u00f1adir sus propios n\u00fameros.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"272\" height=\"462\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/custom-css-settings.png\" alt=\"Custom CSS codes settings guide\" class=\"wp-image-54610\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/custom-css-settings.png 272w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/custom-css-settings-177x300.png 177w\" sizes=\"(max-width: 272px) 100vw, 272px\" \/><\/figure>\n\n\n\n<p><strong>CSS personalizado:<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>selector.elementor-sticky\u2013-effects { \nbackground-color: rgb(255, 220, 168) !important; \n}\nselector { \ntransition: background-color 3s ease !important; \n}\nselector.elementor-sticky\u2013-effects &gt;.elementor-container { \nmin-height: 80px; \n}\nselector &gt; .elementor-container { \ntransition: min-height 1s ease !important; \n}<\/code><\/pre>\n\n\n\n<p><strong>Este es el aspecto de la cabecera pegajosa despu\u00e9s de a\u00f1adir la clase CSS.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-vimeo wp-block-embed-vimeo wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"ast-oembed-container\" style=\"height: 100%;\"><iframe title=\"Sticky-header-Custom-CSS\" src=\"https:\/\/player.vimeo.com\/video\/486729996?h=fb61ffaf09&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"281\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write\"><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Diferentes opciones de dise\u00f1o de cabecera para usuarios de Elementor<\/h2>\n\n\n\n<p>Elementor viene con una gama de plantillas de cabecera fuera de la caja, cada uno es \u00fanico, elegante y ayuda a sus usuarios a navegar f\u00e1cilmente su sitio web.<\/p>\n\n\n\n<p>Con <a href=\"https:\/\/git-staging.wpastra.com\/go\/elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor<\/a>Si lo desea, puede dise\u00f1ar las cabeceras de su sitio web como quiera. Por ejemplo, puede a\u00f1adir el logotipo del sitio en el centro y el men\u00fa principal debajo del logotipo. Puede a\u00f1adir una cabecera m\u00e1s por encima de la cabecera principal para mostrar el n\u00famero de tel\u00e9fono, botones sociales y mucho m\u00e1s.<\/p>\n\n\n\n<p>Estas son s\u00f3lo algunas de las diferentes opciones de dise\u00f1o de cabecera para los usuarios de Elementor.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"928\" height=\"62\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-design-sample1.png\" alt=\"Sample number 1 of header built with elementor\" class=\"wp-image-54611\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-design-sample1.png 928w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-design-sample1-300x20.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-design-sample1-768x51.png 768w\" sizes=\"(max-width: 928px) 100vw, 928px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"929\" height=\"79\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-sample2.png\" alt=\"Sample number 2 of header built with elementor\" class=\"wp-image-54612\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-sample2.png 929w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-sample2-300x26.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-sample2-768x65.png 768w\" sizes=\"(max-width: 929px) 100vw, 929px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"930\" height=\"78\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-sample3.png\" alt=\"Sample number 3 of header built with elementor\" class=\"wp-image-54613\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-sample3.png 930w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-sample3-300x25.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-sample3-768x64.png 768w\" sizes=\"(max-width: 930px) 100vw, 930px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"931\" height=\"189\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-sample4.png\" alt=\"Sample number 4 of header built with elementor\" class=\"wp-image-54614\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-sample4.png 931w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-sample4-300x61.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-sample4-768x156.png 768w\" sizes=\"(max-width: 931px) 100vw, 931px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"931\" height=\"194\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-sample5.png\" alt=\"Sample number 5 of header built with elementor\" class=\"wp-image-54615\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-sample5.png 931w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-sample5-300x63.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-sample5-768x160.png 768w\" sizes=\"(max-width: 931px) 100vw, 931px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"931\" height=\"219\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-sample6.png\" alt=\"Sample number 6 of header built with elementor\" class=\"wp-image-54616\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-sample6.png 931w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-sample6-300x71.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-sample6-768x181.png 768w\" sizes=\"(max-width: 931px) 100vw, 931px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"926\" height=\"176\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-sample7.png\" alt=\"Sample number 7 of header built with elementor\" class=\"wp-image-54617\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-sample7.png 926w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-sample7-300x57.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-sample7-768x146.png 768w\" sizes=\"(max-width: 926px) 100vw, 926px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"931\" height=\"74\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-sample8.png\" alt=\"Sample number 8 of header built with elementor\" class=\"wp-image-54618\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-sample8.png 931w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-sample8-300x24.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/elementor-header-sample8-768x61.png 768w\" sizes=\"(max-width: 931px) 100vw, 931px\" \/><\/figure>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-1 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\">\n<div class=\"inherit-container-width wp-block-group has-background is-layout-constrained wp-container-core-group-is-layout-1 wp-block-group-is-layout-constrained\" style=\"background-color:#f9f9fb;padding-top:25px;padding-right:15px;padding-bottom:25px;padding-left:15px\">\n<div class=\"wp-block-uagb-blockquote uagb-block-f7bd422a uagb-blockquote__skin-quotation uagb-blockquote__align-left uagb-blockquote__style-style_2 uagb-blockquote__with-tweet uagb-blockquote__tweet-style-classic uagb-blockquote__tweet-icon_text uagb-blockquote__stack-img-none\"><blockquote class=\"uagb-blockquote\"><span class=\"uagb-blockquote__icon\"><\/span><div class=\"uagb-blockquote__content\">Si tienes el tema Astra Pro y no est\u00e1s utilizando un constructor de p\u00e1ginas para tu sitio, tambi\u00e9n puedes crear una cabecera adhesiva utilizando Astra Pro.<\/div><footer><div class=\"uagb-blockquote__author-wrap uagb-blockquote__author-at-left\"><\/div><a href=\"\/es\/\" class=\"uagb-blockquote__tweet-button\" target=\"_blank\" rel=\"noopener noreferrer\">Tweet<\/a><\/footer><\/blockquote><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p>En <a href=\"https:\/\/git-staging.wpastra.com\/es\/pro\/\" target=\"_blank\" rel=\"noreferrer noopener\">Tema Astra Pro <\/a>es altamente flexible y compatible con todos los constructores de p\u00e1ginas\/temas populares. Si combina Astra Pro con su creador de p\u00e1ginas favorito, podr\u00e1 crear cualquier tipo de sitio web con esta potente combinaci\u00f3n.<\/p>\n\n\n\n<p>Astra Pro le ofrece la posibilidad de crear un encabezado adhesivo y un encabezado transparente. Junto con opciones para alinear tambi\u00e9n el logotipo del sitio y las secciones del men\u00fa donde quieras.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"298\" height=\"390\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/astra-pro-header-settings.png\" alt=\"header and sticky options settings for Astra\" class=\"wp-image-54619\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/astra-pro-header-settings.png 298w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/astra-pro-header-settings-229x300.png 229w\" sizes=\"(max-width: 298px) 100vw, 298px\" \/><\/figure>\n\n\n\n<p>Si no utiliza<a href=\"https:\/\/git-staging.wpastra.com\/es\/pro\/\" target=\"_blank\" rel=\"noreferrer noopener\"> Astra Pro<\/a> sin embargo, \u00a1es el momento adecuado para cambiar!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusi\u00f3n<\/h2>\n\n\n\n<p>A\u00f1adir un encabezado adhesivo puede ayudar a los usuarios de su sitio web a navegar por \u00e9l m\u00e1s f\u00e1cilmente y a dirigir los clics a todos los aspectos de su sitio.<\/p>\n\n\n\n<p>Elementor resuelve el problema de tener que crear cabeceras adhesivas manualmente utilizando Javascript y CSS. Gracias a Elementor sticky headers no podr\u00eda ser m\u00e1s f\u00e1cil crear una cabecera adhesiva para su sitio web.<\/p>\n\n\n\n<p>Empezar a utilizar <a href=\"https:\/\/git-staging.wpastra.com\/go\/elementor\/\" target=\"_blank\" rel=\"noreferrer noopener\">Elementor <\/a>con el m\u00e1s compatible <a href=\"https:\/\/git-staging.wpastra.com\/es\/pro\/\" target=\"_blank\" rel=\"noreferrer noopener\">Astra Pro<\/a> tema. Y construir cualquier tipo de sitio web que desee.<\/p>\n\n\n\n<p>Si tienes alguna duda sobre el encabezado adhesivo, h\u00e1znoslo saber en la secci\u00f3n de comentarios \ud83d\ude42 .<\/p>","protected":false},"excerpt":{"rendered":"<p>Una cabecera es a menudo lo primero que ve un usuario cuando visita su sitio web y es la columna vertebral de c\u00f3mo un usuario navega por su sitio web. Si usted tiene un sitio web de comercio electr\u00f3nico, un sitio personal, un sitio web de educaci\u00f3n, un foro de la comunidad, o un sitio web de los medios de comunicaci\u00f3n. Es la cabecera lo que facilita la navegaci\u00f3n y [...]<\/p>","protected":false},"author":9,"featured_media":54397,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[860],"tags":[],"class_list":{"0":"post-54386","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-guides-and-tutorials"},"spectra_custom_meta":{"_edit_lock":["1685614304:88"],"_edit_last":["88"],"astra_display_author":["9"],"tap_disable_autolinker":["no"],"tap_autolink_inside_heading":["global"],"tap_autolink_random_placement":["global"],"tap_post_autolinker_limit":["0"],"_yoast_wpseo_primary_category":["860"],"essb_pc_facebook":["1"],"essb_pc_facebook_like":[""],"essb_pc_twitter":[""],"essb_pc_google":[""],"essb_pc_pinterest":[""],"essb_pc_linkedin":[""],"essb_pc_digg":[""],"essb_pc_del":[""],"essb_pc_stumbleupon":[""],"essb_pc_tumblr":[""],"essb_pc_vk":[""],"essb_pc_print":[""],"essb_pc_mail":[""],"essb_pc_flattr":[""],"essb_pc_reddit":[""],"essb_pc_buffer":[""],"essb_pc_love":[""],"essb_pc_weibo":[""],"essb_pc_pocket":[""],"essb_pc_xing":[""],"essb_pc_ok":[""],"essb_pc_mwp":[""],"essb_pc_more":[""],"essb_pc_whatsapp":[""],"essb_pc_meneame":[""],"essb_pc_blogger":[""],"essb_pc_amazon":[""],"essb_pc_yahoomail":[""],"essb_pc_gmail":[""],"essb_pc_aol":[""],"essb_pc_newsvine":[""],"essb_pc_hackernews":[""],"essb_pc_evernote":[""],"essb_pc_myspace":[""],"essb_pc_mailru":[""],"essb_pc_viadeo":[""],"essb_pc_line":[""],"essb_pc_flipboard":[""],"essb_pc_comments":[""],"essb_pc_yummly":[""],"essb_pc_sms":[""],"essb_pc_viber":[""],"essb_pc_telegram":[""],"essb_pc_subscribe":[""],"essb_pc_skype":[""],"essb_pc_messenger":[""],"essb_pc_kakaotalk":[""],"essb_pc_share":[""],"essb_pc_livejournal":[""],"essb_pc_yammer":[""],"essb_pc_meetedgar":[""],"essb_pc_fintel":[""],"essb_pc_mix":[""],"essb_pc_instapaper":[""],"essb_pc_copy":[""],"site-sidebar-layout":["default"],"site-content-layout":["default"],"theme-transparent-header-meta":["default"],"_yoast_wpseo_content_score":["90"],"_essb_love":["0"],"essb_cache_expire":["1588222471"],"essb_c_facebook":["35"],"essb_c_facebook_like":["0"],"essb_c_twitter":["0"],"essb_c_google":["0"],"essb_c_pinterest":["0"],"essb_c_linkedin":["0"],"essb_c_digg":["0"],"essb_c_del":["0"],"essb_c_stumbleupon":["0"],"essb_c_tumblr":["0"],"essb_c_vk":["1"],"essb_c_print":["0"],"essb_c_mail":["0"],"essb_c_flattr":["0"],"essb_c_reddit":["0"],"essb_c_buffer":["0"],"essb_c_love":["0"],"essb_c_weibo":["0"],"essb_c_pocket":["0"],"essb_c_xing":["0"],"essb_c_ok":["0"],"essb_c_mwp":["0"],"essb_c_more":["0"],"essb_c_whatsapp":["0"],"essb_c_meneame":["0"],"essb_c_blogger":["0"],"essb_c_amazon":["0"],"essb_c_yahoomail":["0"],"essb_c_gmail":["0"],"essb_c_aol":["0"],"essb_c_newsvine":["0"],"essb_c_hackernews":["0"],"essb_c_evernote":["0"],"essb_c_myspace":["0"],"essb_c_mailru":["0"],"essb_c_viadeo":["0"],"essb_c_line":["0"],"essb_c_flipboard":["0"],"essb_c_comments":["2"],"essb_c_yummly":["0"],"essb_c_sms":["0"],"essb_c_viber":["0"],"essb_c_telegram":["0"],"essb_c_subscribe":["0"],"essb_c_skype":["0"],"essb_c_messenger":["0"],"essb_c_kakaotalk":["0"],"essb_c_share":["0"],"essb_c_livejournal":["0"],"essb_c_yammer":["0"],"essb_c_meetedgar":["0"],"essb_c_fintel":["0"],"essb_c_mix":["0"],"essb_c_instapaper":["0"],"essb_c_copy":["0"],"_ppc_meta_key":["a:16:{s:8:\"ppc_key3\";s:28:\"Category and Author Selected\";s:8:\"ppc_key2\";s:23:\"Featured Image Assigned\";s:8:\"ppc_key5\";s:37:\"Title is Catchy and Slug is Optimized\";s:8:\"ppc_key4\";s:15:\"Formatting Done\";s:8:\"ppc_key8\";s:28:\"Spelling and Grammar Checked\";s:20:\"ppc_key5ddf5ba19a347\";s:9:\"TOC Added\";s:20:\"ppc_key5ddf5c326920c\";s:59:\"Headings are in title-case and have appropriate heading tag\";s:8:\"ppc_key6\";s:22:\"Social Images Assigned\";s:20:\"ppc_key5d92f85d42273\";s:60:\"Images &amp; Names Correctly. Title &amp; Alt Tags are Given\";s:20:\"ppc_key5ddf5b93dc6a6\";s:21:\"Affiliate Links Added\";s:8:\"ppc_key7\";s:8:\"Done SEO\";s:20:\"ppc_key610cc9c5c4d6c\";s:37:\"For new content disable updated date.\";s:20:\"ppc_key610cc9d811cfe\";s:39:\"For updated content enable updated date\";s:20:\"ppc_key62b0172ee5a4c\";s:23:\"Featured image assigned\";s:20:\"ppc_key62b0173b707c0\";s:40:\"For updated content, enable updated date\";s:20:\"ppc_key62b01736334b5\";s:37:\"For new content, disable updated date\";}"],"_thumbnail_id":["54397"],"essb_cached_image":["https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/How-To-Create-Sticky-Headers-With-Elementor.jpg"],"uagb_style_timestamp-css":["1580884751"],"uagb_style_timestamp-js":["1588223921"],"_yoast_wpseo_opengraph-title":["How To Create Sticky Headers With Elementor - Your Ultimate Guide"],"_yoast_wpseo_opengraph-description":["Whether you have an eCommerce website, a personal site, an education website, a community forum, or a media website. It\u2019s the header that makes it easy to navigate and a pleasure to use."],"_yoast_wpseo_opengraph-image":["https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/How-To-Create-Sticky-Headers-With-Elementor.jpg"],"_yoast_wpseo_opengraph-image-id":["54397"],"_yoast_wpseo_twitter-title":["How To Create Sticky Headers With Elementor - Your Ultimate Guide"],"_yoast_wpseo_twitter-description":["Whether you have an eCommerce website, a personal site, an education website, a community forum, or a media website. It\u2019s the header that makes it easy to navigate and a pleasure to use."],"_yoast_wpseo_twitter-image":["https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/How-To-Create-Sticky-Headers-With-Elementor.jpg"],"_yoast_wpseo_twitter-image-id":["54397"],"_elementor_controls_usage":["a:0:{}"],"_wp_old_date":["2020-01-28"],"_yoast_wpseo_focuskw":["sticky headers elementor"],"_yoast_wpseo_title":["Elementor Sticky Header Guide - How to Create Sticky Headers With Elementor"],"_yoast_wpseo_metadesc":["A header is the first thing you're visitor sees on your website. Learn how to create impressive Sticky Headers in Elementor following this guide."],"_yoast_wpseo_linkdex":["67"],"essb_c_total":["38"],"uag_style_timestamp-css":["1590125090"],"uag_style_timestamp-js":["1590125090"],"_oembed_f130d3b7f4282face59ac776bfbae1b8":["<iframe title=\"Sticky-header-Custom-CSS\" src=\"https:\/\/player.vimeo.com\/video\/486729996?h=fb61ffaf09&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"281\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen><\/iframe>"],"_oembed_time_f130d3b7f4282face59ac776bfbae1b8":["1685614206"],"_oembed_291d8a710f6c49903530af812152c29d":["<iframe title=\"Sticky-header-Custom-CSS\" src=\"https:\/\/player.vimeo.com\/video\/486729996?dnt=1&amp;app_id=122963\" width=\"1200\" height=\"675\" frameborder=\"0\" allow=\"autoplay; fullscreen\" allowfullscreen><\/iframe>"],"_oembed_time_291d8a710f6c49903530af812152c29d":["1606986651"],"_lmt_disableupdate":["no"],"_uagb_toc_heading_content":["a:8:{i:0;a:4:{s:5:\"level\";i:2;s:2:\"id\";s:43:\"how-to-create-sticky-headers-with-elementor\";s:7:\"content\";s:43:\"How to Create Sticky Headers with Elementor\";s:5:\"depth\";i:2;}i:1;a:4:{s:5:\"level\";i:3;s:2:\"id\";s:25:\"step-1-creating-your-menu\";s:7:\"content\";s:26:\"Step 1: Creating Your Menu\";s:5:\"depth\";i:3;}i:2;a:4:{s:5:\"level\";i:3;s:2:\"id\";s:40:\"step-2-creating-your-header-in-elementor\";s:7:\"content\";s:41:\"Step 2: Creating Your Header In Elementor\";s:5:\"depth\";i:3;}i:3;a:4:{s:5:\"level\";i:3;s:2:\"id\";s:46:\"step-3-creating-a-header-template-in-elementor\";s:7:\"content\";s:47:\"Step 3: Creating a Header Template in Elementor\";s:5:\"depth\";i:3;}i:4;a:4:{s:5:\"level\";i:3;s:2:\"id\";s:47:\"step-4-how-to-make-your-elementor-header-sticky\";s:7:\"content\";s:49:\"Step 4: How to Make Your Elementor Header Sticky.\";s:5:\"depth\";i:3;}i:5;a:4:{s:5:\"level\";i:2;s:2:\"id\";s:68:\"make-your-elementor-sticky-header-much-more-stylish-using-custom-css\";s:7:\"content\";s:68:\"Make Your Elementor Sticky Header Much More Stylish Using Custom CSS\";s:5:\"depth\";i:2;}i:6;a:4:{s:5:\"level\";i:2;s:2:\"id\";s:51:\"different-header-design-options-for-elementor-users\";s:7:\"content\";s:51:\"Different Header Design Options for Elementor Users\";s:5:\"depth\";i:2;}i:7;a:4:{s:5:\"level\";i:2;s:2:\"id\";s:10:\"conclusion\";s:7:\"content\";s:10:\"Conclusion\";s:5:\"depth\";i:2;}}"],"_wplmi_last_modified":["2023-06-01 15:41:42"],"_lmt_disable":["no"],"wp_last_modified_info":["June 1, 2023 @ 3:41 PM"],"wplmi_shortcode":["[lmt-post-modified-info]"],"_yoast_wpseo_estimated-reading-time-minutes":["10"],"rank_math_primary_category":["860"],"rank_math_title":["How To Create Elementor Sticky Headers - Beginner's Guide"],"rank_math_description":["A header is the first thing you're visitor sees on your website. Learn how to create impressive Elementor sticky headers with this guide."],"rank_math_focus_keyword":["Elementor sticky header"],"rank_math_facebook_title":["How To Create Elementor Sticky Headers - Beginner's Guide"],"rank_math_facebook_description":["A header is the first thing you're visitor sees on your website. Learn how to create impressive Elementor sticky headers with this guide."],"rank_math_twitter_title":["How To Create Elementor Sticky Headers - Beginner's Guide"],"rank_math_twitter_description":["A header is the first thing you're visitor sees on your website. Learn how to create impressive Elementor sticky headers with this guide."],"rank_math_news_sitemap_robots":["index"],"rank_math_robots":["a:1:{i:0;s:5:\"index\";}"],"rank_math_facebook_image":["https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/How-To-Create-Sticky-Headers-With-Elementor.jpg"],"rank_math_facebook_image_id":["54397"],"rank_math_twitter_image":["https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/How-To-Create-Sticky-Headers-With-Elementor.jpg"],"rank_math_twitter_image_id":["54397"],"rank_math_twitter_use_facebook":["on"],"rank_math_analytic_object_id":["734"],"rank_math_internal_links_processed":["1"],"rank_math_schema_BlogPosting":["a:8:{s:8:\"headline\";s:11:\"%seo_title%\";s:11:\"description\";s:17:\"%seo_description%\";s:13:\"datePublished\";s:20:\"%date(Y-m-dTH:i:sP)%\";s:12:\"dateModified\";s:24:\"%modified(Y-m-dTH:i:sP)%\";s:5:\"image\";a:2:{s:5:\"@type\";s:11:\"ImageObject\";s:3:\"url\";s:16:\"%post_thumbnail%\";}s:6:\"author\";a:2:{s:5:\"@type\";s:6:\"Person\";s:4:\"name\";s:6:\"%name%\";}s:5:\"@type\";s:11:\"BlogPosting\";s:8:\"metadata\";a:3:{s:5:\"title\";s:7:\"Article\";s:4:\"type\";s:8:\"template\";s:9:\"isPrimary\";s:1:\"1\";}}"],"rank_math_schema_VideoObject":["a:9:{s:8:\"metadata\";a:8:{s:5:\"title\";s:5:\"Video\";s:4:\"type\";s:8:\"template\";s:9:\"shortcode\";s:15:\"s-628b7d8c11ca5\";s:9:\"isPrimary\";s:0:\"\";s:23:\"reviewLocationShortcode\";s:24:\"[rank_math_rich_snippet]\";s:8:\"category\";s:12:\"%categories%\";s:4:\"tags\";s:6:\"%tags%\";s:15:\"isAutoGenerated\";s:1:\"1\";}s:5:\"@type\";s:11:\"VideoObject\";s:8:\"embedUrl\";s:40:\"https:\/\/player.vimeo.com\/video\/486729996\";s:4:\"name\";s:11:\"%seo_title%\";s:11:\"description\";s:17:\"%seo_description%\";s:10:\"uploadDate\";s:20:\"%date(Y-m-dTH:i:sP)%\";s:12:\"thumbnailUrl\";s:16:\"%post_thumbnail%\";s:7:\"hasPart\";a:0:{}s:16:\"isFamilyFriendly\";s:1:\"1\";}"],"rank_math_seo_score":["24"],"uael-social-share-count":["a:1:{s:8:\"1b71105e\";i:632;}"],"rank_math_rich_snippet":["off"],"rank_math_shortcode_schema_s-628b7d8c11ca5":["1730490"],"_wpml_media_featured":["1"],"_wpml_media_duplicate":["0"],"_wpml_word_count":["{\"total\":1171,\"to_translate\":{\"es\":1171}}"],"_trp_automatically_translated_slug_es_ES":["cabeceras-adhesivas-con-elementor"],"_uagb_toc_options":["a:2:{s:17:\"_uagb_toc_version\";s:10:\"1776726311\";s:18:\"_uagb_toc_headings\";a:8:{i:0;a:4:{s:5:\"level\";i:2;s:2:\"id\";s:43:\"how-to-create-sticky-headers-with-elementor\";s:7:\"content\";s:43:\"How to Create Sticky Headers with Elementor\";s:5:\"depth\";i:2;}i:1;a:4:{s:5:\"level\";i:3;s:2:\"id\";s:25:\"step-1-creating-your-menu\";s:7:\"content\";s:26:\"Step 1: Creating Your Menu\";s:5:\"depth\";i:3;}i:2;a:4:{s:5:\"level\";i:3;s:2:\"id\";s:40:\"step-2-creating-your-header-in-elementor\";s:7:\"content\";s:41:\"Step 2: Creating Your Header In Elementor\";s:5:\"depth\";i:3;}i:3;a:4:{s:5:\"level\";i:3;s:2:\"id\";s:46:\"step-3-creating-a-header-template-in-elementor\";s:7:\"content\";s:47:\"Step 3: Creating a Header Template in Elementor\";s:5:\"depth\";i:3;}i:4;a:4:{s:5:\"level\";i:3;s:2:\"id\";s:47:\"step-4-how-to-make-your-elementor-header-sticky\";s:7:\"content\";s:49:\"Step 4: How to Make Your Elementor Header Sticky.\";s:5:\"depth\";i:3;}i:5;a:4:{s:5:\"level\";i:2;s:2:\"id\";s:68:\"make-your-elementor-sticky-header-much-more-stylish-using-custom-css\";s:7:\"content\";s:68:\"Make Your Elementor Sticky Header Much More Stylish Using Custom CSS\";s:5:\"depth\";i:2;}i:6;a:4:{s:5:\"level\";i:2;s:2:\"id\";s:51:\"different-header-design-options-for-elementor-users\";s:7:\"content\";s:51:\"Different Header Design Options for Elementor Users\";s:5:\"depth\";i:2;}i:7;a:4:{s:5:\"level\";i:2;s:2:\"id\";s:10:\"conclusion\";s:7:\"content\";s:10:\"Conclusion\";s:5:\"depth\";i:2;}}}"],"_oembed_8b9b649bb948d5cacff454af18fa4f76":["<iframe title=\"Sticky-header-Custom-CSS\" src=\"https:\/\/player.vimeo.com\/video\/486729996?h=fb61ffaf09&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"281\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write\"><\/iframe>"],"_oembed_time_8b9b649bb948d5cacff454af18fa4f76":["1718210330"],"_uag_page_assets":["a:9:{s:3:\"css\";s:11467:\".uagb-block-9cff5aed.wp-block-uagb-table-of-contents{text-align: left;}.uagb-block-9cff5aed .uagb-toc__list-wrap li a{color: #54595F;}.uagb-block-9cff5aed .uagb-toc__wrap .uagb-toc__title-wrap{justify-content: left;}.uagb-block-9cff5aed .uagb-toc__wrap .uagb-toc__title{justify-content: left;}.uagb-block-9cff5aed .uagb-toc__wrap{border-top-width: 1px;border-left-width: 1px;border-right-width: 1px;border-bottom-width: 1px;border-top-left-radius: 6px;border-top-right-radius: 6px;border-bottom-left-radius: 6px;border-bottom-right-radius: 6px;border-color: #333;border-style: solid;padding-left: 30px;padding-right: 30px;padding-top: 30px;padding-bottom: 30px;background: #fff;width: 100%;}.uagb-block-9cff5aed .uagb-toc__list-wrap{column-count: 1;overflow: hidden;text-align: left;}.uagb-block-9cff5aed .uagb-toc__list-wrap > ul.uagb-toc__list > li:first-child{padding-top: 0;}.uagb-block-9cff5aed .uagb-toc__list-wrap ul.uagb-toc__list:last-child > li:last-child{padding-bottom: 0;}.uagb-block-9cff5aed .uagb-toc__list .uagb-toc__list{list-style-type: disc !important;}.uagb-block-9cff5aed .uagb-toc__title{font-weight: Default;font-size: 20px;}.uagb-block-9cff5aed .uagb-toc__list-wrap ol li a{text-decoration: underline;}.uagb-block-f7bd422a .uagb-blockquote__content{font-style: italic;font-size: 18px;line-height: 1.5em;margin-bottom: 15px;text-align: left;}.uagb-block-f7bd422a cite.uagb-blockquote__author{color: var(--ast-global-color-5);text-align: left;}.uagb-block-f7bd422a .uagb-blockquote__skin-border blockquote.uagb-blockquote{border-color: #abb8c3;border-left-style: solid;border-left-width: 4px;padding-left: 15px;}.uagb-block-f7bd422a.uagb-blockquote__skin-border blockquote.uagb-blockquote{border-color: #abb8c3;border-left-style: solid;border-left-width: 4px;padding-left: 15px;}.uagb-block-f7bd422a .uagb-blockquote__skin-quotation .uagb-blockquote__icon-wrap{background: #F7FAFC;border-radius: 100%;margin-bottom: 15px;margin-right: 5px;padding: 10px;}.uagb-block-f7bd422a .uagb-blockquote__skin-quotation .uagb-blockquote__icon{width: 25px;height: 25px;}.uagb-block-f7bd422a.uagb-blockquote__skin-quotation .uagb-blockquote__icon{background: #F7FAFC;border-radius: 100%;margin-bottom: 15px;margin-right: 5px;padding: 10px;}.uagb-block-f7bd422a.uagb-blockquote__skin-quotation .uagb-blockquote__icon svg{width: 25px;height: 25px;fill: #7143e3;}.uagb-block-f7bd422a.uagb-blockquote__style-style_1 .uagb-blockquote{text-align: left;}.uagb-block-f7bd422a .uagb-blockquote__author-wrap{margin-bottom: 0px;}.uagb-block-f7bd422a .uagb-blockquote__author-wrap img{width: 40px;height: 40px;border-radius: 100%;}.uagb-block-f7bd422a .uagb-blockquote__author-wrap.uagb-blockquote__author-at-right img{margin-left: 10px;}.uagb-block-f7bd422a .uagb-blockquote__author-wrap.uagb-blockquote__author-at-top img{margin-bottom: 10px;}.uagb-block-f7bd422a .uagb-blockquote__author-wrap.uagb-blockquote__author-at-left img{margin-right: 10px;}.uagb-block-f7bd422a .uagb-blockquote__skin-quotation .uagb-blockquote__icon svg{fill: #7143e3;width: 25px;height: 25px;}.uagb-block-f7bd422a.uagb-blockquote__align-center blockquote.uagb-blockquote{text-align: left;}.uagb-block-f7bd422a.uagb-blockquote__tweet-style-link a.uagb-blockquote__tweet-button{color: #1DA1F2;}.uagb-block-f7bd422a.uagb-blockquote__tweet-style-link a.uagb-blockquote__tweet-button svg{fill: #1DA1F2;}.uagb-block-f7bd422a .uagb-blockquote__tweet-style-classic a.uagb-blockquote__tweet-button{color: #181273;background-color: #ffc300;padding-left: 20px;padding-right: 20px;padding-top: 12px;padding-bottom: 12px;}.uagb-block-f7bd422a.uagb-blockquote__tweet-style-classic a.uagb-blockquote__tweet-button{color: #181273;background-color: #ffc300;padding-left: 20px;padding-right: 20px;padding-top: 12px;padding-bottom: 12px;}.uagb-block-f7bd422a.uagb-blockquote__tweet-style-classic a.uagb-blockquote__tweet-button svg{fill: #181273;}.uagb-block-f7bd422a.uagb-blockquote__tweet-style-bubble a.uagb-blockquote__tweet-button{color: #181273;background-color: #ffc300;padding-left: 20px;padding-right: 20px;padding-top: 12px;padding-bottom: 12px;}.uagb-block-f7bd422a .uagb-blockquote__tweet-style-bubble a.uagb-blockquote__tweet-button{color: #181273;background-color: #ffc300;padding-left: 20px;padding-right: 20px;padding-top: 12px;padding-bottom: 12px;}.uagb-block-f7bd422a .uagb-blockquote__tweet-style-bubble a.uagb-blockquote__tweet-button:before{border-right-color: #ffc300;}.uagb-block-f7bd422a .uagb-blockquote__tweet-style-link a.uagb-blockquote__tweet-button:hover{color: #ffffff;}.uagb-block-f7bd422a .uagb-blockquote__tweet-style-link a.uagb-blockquote__tweet-button:hover svg{fill: #ffffff;}.uagb-block-f7bd422a .uagb-blockquote__tweet-style-classic a.uagb-blockquote__tweet-button:hover{color: #ffffff;background-color: #ffd71c;}.uagb-block-f7bd422a .uagb-blockquote__tweet-style-classic a.uagb-blockquote__tweet-button:hover svg{fill: #ffffff;}.uagb-block-f7bd422a .uagb-blockquote__tweet-style-bubble a.uagb-blockquote__tweet-button:hover{color: #ffffff;background-color: #ffd71c;}.uagb-block-f7bd422a .uagb-blockquote__tweet-style-bubble a.uagb-blockquote__tweet-button:hover svg{fill: #ffffff;}.uagb-block-f7bd422a .uagb-blockquote__tweet-style-bubble a.uagb-blockquote__tweet-button:hover:before{border-right-color: #ffd71c;}.uagb-block-f7bd422a.uagb-blockquote__tweet-style-bubble a.uagb-blockquote__tweet-button svg{fill: #181273;}.uagb-block-f7bd422a.uagb-blockquote__tweet-style-bubble a.uagb-blockquote__tweet-button:before{border-right-color: #ffc300;}.uagb-block-f7bd422a a.uagb-blockquote__tweet-button svg{width: 14px;height: 14px;}.uagb-block-f7bd422a.uagb-blockquote__tweet-icon_text a.uagb-blockquote__tweet-button svg{margin-right: 13px;}.uagb-block-f7bd422a.uagb-blockquote__tweet-style-link a.uagb-blockquote__tweet-button:hover{color: #ffffff;}.uagb-block-f7bd422a.uagb-blockquote__tweet-style-link a.uagb-blockquote__tweet-button:hover svg{fill: #ffffff;}.uagb-block-f7bd422a.uagb-blockquote__tweet-style-classic a.uagb-blockquote__tweet-button:hover{color: #ffffff;background-color: #ffd71c;}.uagb-block-f7bd422a.uagb-blockquote__tweet-style-classic a.uagb-blockquote__tweet-button:hover svg{fill: #ffffff;}.uagb-block-f7bd422a.uagb-blockquote__tweet-style-bubble a.uagb-blockquote__tweet-button:hover{color: #ffffff;background-color: #ffd71c;}.uagb-block-f7bd422a.uagb-blockquote__tweet-style-bubble a.uagb-blockquote__tweet-button:hover svg{fill: #ffffff;}.uagb-block-f7bd422a.uagb-blockquote__tweet-style-bubble a.uagb-blockquote__tweet-button:hover:before{border-right-color: #ffd71c;}.uagb-block-f7bd422a .uagb-blockquote a.uagb-blockquote__tweet-button{font-weight: 600;font-size: 14px;}@media only screen and (max-width: 976px) {.uagb-block-9cff5aed .uagb-toc__wrap{border-style: solid;}.uagb-block-9cff5aed .uagb-toc__list-wrap{column-count: 1;overflow: hidden;text-align: left;}.uagb-block-9cff5aed .uagb-toc__list-wrap > ul.uagb-toc__list > li:first-child{padding-top: 0;}.uagb-block-9cff5aed .uagb-toc__list-wrap ul.uagb-toc__list:last-child > li:last-child{padding-bottom: 0;}.uagb-block-f7bd422a .uagb-blockquote__author-wrap{margin-bottom: 0px;}.uagb-block-f7bd422a .uagb-blockquote__author-wrap img{width: 35px;height: 35px;border-radius: 100%;}.uagb-block-f7bd422a.uagb-blockquote__skin-border blockquote.uagb-blockquote{padding-left: 15px;}.uagb-block-f7bd422a .uagb-blockquote__content{margin-bottom: 20px;}.uagb-block-f7bd422a .uagb-blockquote__author-wrap.uagb-blockquote__author-at-right img{margin-left: 10px;margin-bottom: 0px;}.uagb-block-f7bd422a .uagb-blockquote__author-wrap.uagb-blockquote__author-at-top img{margin-bottom: 10px;}.uagb-block-f7bd422a .uagb-blockquote__author-wrap.uagb-blockquote__author-at-left img{margin-right: 10px;margin-bottom: 0px;}}@media only screen and (max-width: 767px) {.uagb-block-9cff5aed .uagb-toc__wrap{border-style: solid;}.uagb-block-9cff5aed .uagb-toc__list-wrap{column-count: 1;overflow: hidden;text-align: left;}.uagb-block-9cff5aed .uagb-toc__list-wrap > ul.uagb-toc__list > li:first-child{padding-top: 0;}.uagb-block-9cff5aed .uagb-toc__list-wrap ul.uagb-toc__list:last-child > li:last-child{padding-bottom: 0;}.uagb-block-f7bd422a.uagb-blockquote__skin-quotation .uagb-blockquote__icon{padding: 0px;}.uagb-block-f7bd422a .uagb-blockquote__author-wrap{margin-bottom: 0px;}.uagb-block-f7bd422a .uagb-blockquote__author-wrap img{width: 30px;height: 30px;border-radius: 100%;}.uagb-block-f7bd422a.uagb-blockquote__skin-border blockquote.uagb-blockquote{padding-left: 15px;}.uagb-block-f7bd422a .uagb-blockquote__content{margin-bottom: 15px;}.uagb-block-f7bd422a .uagb-blockquote__author-wrap.uagb-blockquote__author-at-right img{margin-left: 10px;margin-bottom: 0px;}.uagb-block-f7bd422a .uagb-blockquote__author-wrap.uagb-blockquote__author-at-top img{margin-bottom: 10px;}.uagb-block-f7bd422a .uagb-blockquote__author-wrap.uagb-blockquote__author-at-left img{margin-right: 10px;margin-bottom: 0px;}}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape-top svg{width: calc( 100% + 1.3px );}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape.uagb-container__shape-top .uagb-container__shape-fill{fill: rgba(51,51,51,1);}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape-bottom svg{width: calc( 100% + 1.3px );}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__shape.uagb-container__shape-bottom .uagb-container__shape-fill{fill: rgba(51,51,51,1);}.wp-block-uagb-container.uagb-block-debf2792 .uagb-container__video-wrap video{opacity: 1;}.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{max-width: 100%;width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 1200px);max-width: var(--inner-content-custom-width);width: 100%;flex-direction: column;align-items: center;justify-content: center;flex-wrap: nowrap;row-gap: 0px;column-gap: 0px;}.wp-block-uagb-container.uagb-block-debf2792{box-shadow: 0px 0px   #00000070 ;padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;overflow: visible;border-color: inherit;row-gap: 0px;column-gap: 0px;}@media only screen and (max-width: 976px) {.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 1024px);max-width: var(--inner-content-custom-width);width: 100%;}.wp-block-uagb-container.uagb-block-debf2792{padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;}}@media only screen and (max-width: 767px) {.wp-block-uagb-container.uagb-is-root-container .uagb-block-debf2792{max-width: 100%;width: 100%;}.wp-block-uagb-container.uagb-is-root-container.alignfull.uagb-block-debf2792 > .uagb-container-inner-blocks-wrap{--inner-content-custom-width: min( 100%, 767px);max-width: var(--inner-content-custom-width);width: 100%;flex-wrap: wrap;}.wp-block-uagb-container.uagb-block-debf2792{padding-top: 0px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;margin-top: 0px !important;margin-bottom: 0px !important;margin-left: 0px;margin-right: 0px;}}\";s:2:\"js\";s:923:\"document.addEventListener(\"DOMContentLoaded\", function(){ window.addEventListener( 'load', function(){\n\tUAGBTableOfContents._run( {\"mappingHeaders\":[false,true,true,false,false,false],\"scrollToTop\":false,\"makeCollapsible\":false}, '.uagb-block-9cff5aed' );\n} );\nvar selector = document.querySelectorAll( '.uagb-block-f7bd422a' );\nif ( selector.length > 0 ) {\n\n\tvar blockquote__tweet = selector[0].getElementsByClassName(\"uagb-blockquote__tweet-button\");\n\n\tif ( blockquote__tweet.length > 0 ) {\n\n\t\tblockquote__tweet[0].addEventListener(\"click\",function(){\t\n\t\t\tvar request_url = \"https:\/\/twitter.com\/intent\/tweet?text=If+you+have+the+Astra+Pro+theme+and+aren%E2%80%99t+using+a+page+builder+for+your+site%2C+then+you+can+also+create+a+sticky+header+by+using+Astra+Pro.&url=https%3A%2F%2Fgit-staging.wpastra.com%2Fes%2Fes%2Fguides-and-tutorials%2Fsticky-headers-with-elementor%2F\";\n\t\t\twindow.open( request_url );\n\t\t});\n\t}\n}\n });\";s:18:\"current_block_list\";a:12:{i:0;s:14:\"core\/paragraph\";i:1;s:22:\"uagb\/table-of-contents\";i:2;s:12:\"core\/heading\";i:3;s:10:\"core\/image\";i:4;s:9:\"core\/code\";i:5;s:10:\"core\/embed\";i:6;s:12:\"core\/columns\";i:7;s:11:\"core\/column\";i:8;s:10:\"core\/group\";i:9;s:15:\"uagb\/blockquote\";i:10;s:14:\"uagb\/container\";i:11;s:14:\"core\/shortcode\";}s:8:\"uag_flag\";b:1;s:11:\"uag_version\";s:10:\"1776726309\";s:6:\"gfonts\";a:0:{}s:10:\"gfonts_url\";s:0:\"\";s:12:\"gfonts_files\";a:0:{}s:14:\"uag_faq_layout\";b:0;}"]},"uagb_featured_image_src":{"full":["https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/How-To-Create-Sticky-Headers-With-Elementor.jpg",1200,630,false],"thumbnail":["https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/How-To-Create-Sticky-Headers-With-Elementor-150x150.jpg",150,150,true],"medium":["https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/How-To-Create-Sticky-Headers-With-Elementor-300x158.jpg",300,158,true],"medium_large":["https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/How-To-Create-Sticky-Headers-With-Elementor-768x403.jpg",768,403,true],"large":["https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/How-To-Create-Sticky-Headers-With-Elementor-1024x538.jpg",1024,538,true],"1536x1536":["https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/How-To-Create-Sticky-Headers-With-Elementor.jpg",1200,630,false],"2048x2048":["https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/How-To-Create-Sticky-Headers-With-Elementor.jpg",1200,630,false],"trp-custom-language-flag":["https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2020\/01\/How-To-Create-Sticky-Headers-With-Elementor.jpg",18,9,false]},"uagb_author_info":{"display_name":"Pratik Chaskar","author_link":"https:\/\/git-staging.wpastra.com\/es\/author\/pratikc\/"},"uagb_comment_info":9,"uagb_excerpt":"A header is often the first thing a user sees when they visit your site and is the backbone of how a user navigates your website. Whether you have an eCommerce website, a personal site, an education website, a community forum, or a media website. It\u2019s the header that makes it easy to navigate and&hellip;","_links":{"self":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/posts\/54386"}],"collection":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/comments?post=54386"}],"version-history":[{"count":0,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/posts\/54386\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/media\/54397"}],"wp:attachment":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/media?parent=54386"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/categories?post=54386"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/tags?post=54386"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}