{"id":26150,"date":"2018-04-26T00:00:00","date_gmt":"2018-04-25T18:30:00","guid":{"rendered":"https:\/\/git-staging.wpastra.com\/?post_type=docs&#038;p=26150"},"modified":"2023-05-26T13:25:24","modified_gmt":"2023-05-26T07:55:24","slug":"mobile-header-with-astra","status":"publish","type":"docs","link":"https:\/\/git-staging.wpastra.com\/es\/docs\/mobile-header-with-astra\/","title":{"rendered":"Cabecera m\u00f3vil con Astra (Antigua cabecera Astra)"},"content":{"rendered":"<p>Astra versi\u00f3n 1.4.0 y superior proporciona una funci\u00f3n para dise\u00f1ar la cabecera m\u00f3vil por separado para dispositivos responsivos.<\/p>\n\n\n\n<p>Ofrece opciones para ajustar el punto de ruptura del encabezado, establecer diferentes logotipos, elegir diferentes estilos de men\u00fa, establecer colores por separado para el men\u00fa.<\/p>\n\n\n\n<div class=\"wp-block-uagb-inline-notice uagb-inline_notice__align-left uagb-block-7451fa2e uagb-inline_notice__outer-wrap\"><h4 class=\"uagb-notice-title\">Nota:<\/h4><div class=\"uagb-notice-text\"><p>Recientemente hemos publicado el <strong>Cabecera Pie de p\u00e1gina<\/strong> en Astra versi\u00f3n 3.0.0, debido a lo cual encontrar\u00e1 algunos cambios nuevos. Consulte lo siguiente <a href=\"https:\/\/git-staging.wpastra.com\/es\/docs\/create-mobile-header-with-header-builder\/\" target=\"_blank\" rel=\"noreferrer noopener\">art\u00edculo<\/a> para el mismo.<\/p><\/div><\/div>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-vimeo wp-block-embed-vimeo\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"ast-oembed-container\" style=\"height: 100%;\"><iframe title=\"Astra Pro Cabecera m\u00f3vil - Men\u00fa m\u00f3vil\" src=\"https:\/\/player.vimeo.com\/video\/542222622?dnt=1&amp;app_id=122963\" width=\"500\" height=\"260\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write\"><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Opciones de cabecera m\u00f3vil con el tema Astra<\/h3>\n\n\n\n<p>Desde el panel de control de WordPress, vaya a <strong>Apariencia &gt; Personalizar &gt; Encabezado &gt; Men\u00fa principal. <\/strong>Aqu\u00ed, despl\u00e1cese hacia abajo hasta la secci\u00f3n \"Men\u00fa m\u00f3vil\", que contiene la configuraci\u00f3n de la cabecera m\u00f3vil listada en varias pesta\u00f1as diferentes:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Men\u00fa Punto de interrupci\u00f3n<\/strong><\/h4>\n\n\n\n<p>La configuraci\u00f3n se encuentra en<strong>&nbsp;Cabecera &gt; Men\u00fa principal &gt; MEN\u00da M\u00d3VIL <br><\/strong>El punto de ruptura por defecto del men\u00fa Astra es de 921px. Se puede cambiar f\u00e1cilmente con el control deslizante.<br>Por ejemplo - Si un punto de ruptura se establece en 554px entonces la cabecera de escritorio ser\u00e1 visible hasta 554px de ancho y cambiar\u00e1 a una cabecera m\u00f3vil por debajo de 554px.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Objetivo desplegable<\/strong><\/h4>\n\n\n\n<p>Esto le permitir\u00e1 establecer un objetivo para abrir un submen\u00fa en la cabecera m\u00f3vil. Tiene dos opciones - Icono y Enlace.<br>Si elige Icono, el men\u00fa desplegable del submen\u00fa se abrir\u00e1 con el clic de un peque\u00f1o icono en forma de flecha junto al nombre del elemento del men\u00fa.<br>Y si eliges <strong>Enlace<\/strong>, el men\u00fa desplegable del submen\u00fa se abrir\u00e1 al hacer clic en un elemento de men\u00fa completo (enlace).<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-vimeo wp-block-embed-vimeo\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"ast-oembed-container\" style=\"height: 100%;\"><iframe title=\"Astra Pro Cabecera m\u00f3vil - Objetivo desplegable\" src=\"https:\/\/player.vimeo.com\/video\/542227557?dnt=1&amp;app_id=122963\" width=\"500\" height=\"261\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write\"><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h4 class=\"wp-block-heading\"><strong>Cambiar el estilo del bot\u00f3n, cambiar el color del bot\u00f3n y el radio del borde<\/strong><\/h4>\n\n\n\n<p>Los ajustes se encuentran en&nbsp;<strong>Dise\u00f1o &gt; Cabecera &gt; Men\u00fa principal &gt; CABECERA M\u00d3VIL.<br><\/strong>Estiliza el bot\u00f3n de alternancia con estos ajustes. <a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2019\/10\/ast-2-mobile-toggle-style.png\">(?)<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Etiqueta de men\u00fa en dispositivos peque\u00f1os<\/h4>\n\n\n\n<p>La configuraci\u00f3n se encuentra en<strong>&nbsp;Dise\u00f1o &gt; Cabecera &gt; Men\u00fa principal &gt; CABECERA M\u00d3VIL.<br><\/strong>Permite a\u00f1adir una etiqueta al bot\u00f3n de alternancia y resaltarlo. <a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2019\/10\/ast-2-toggle-menu-name.png\">(?)<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Alineaci\u00f3n de la cabecera m\u00f3vil<\/h4>\n\n\n\n<p>Permite elegir la alineaci\u00f3n del logotipo y el men\u00fa en los dispositivos <strong>por debajo del punto de ruptura.<\/strong> <a aria-label=\" (se abre en una nueva pesta\u00f1a)\" href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2019\/10\/ast-2-mobile-header-layout.png\" target=\"_blank\" rel=\"noreferrer noopener\">(?)<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Logotipo (opcional)<\/h4>\n\n\n\n<p>Las pantallas de escritorio a menudo requieren un logotipo m\u00e1s grande que las pantallas m\u00f3viles. Al mismo tiempo, este logotipo grande podr\u00eda ocultar la mayor parte de la ventana gr\u00e1fica en los m\u00f3viles. Adem\u00e1s, puede haber diferencias entre las cabeceras de escritorio y m\u00f3viles que requieran un logotipo diferente (color, tipo, tama\u00f1o, etc.). Por lo tanto, hay una opci\u00f3n separada para a\u00f1adir un logotipo diferente para dispositivos m\u00f3viles.<\/p>\n\n\n\n<p>Puede configurarlo en <strong>Dise\u00f1o &gt; Cabecera &gt; Identidad del sitio. <\/strong>Elija una opci\u00f3n&nbsp;<strong>\u00bfUn logotipo diferente para los dispositivos m\u00f3viles?<\/strong> y a\u00f1ada aqu\u00ed una imagen del logotipo del dispositivo m\u00f3vil. <a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2019\/10\/ast-2-mobile-logo.png\">(?)<\/a><\/p>\n\n\n\n<p>Para ajustar el tama\u00f1o del logotipo, haga clic en el bot\u00f3n de respuesta para <strong>Ancho del logotipo<\/strong> y ajuste la anchura.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-vimeo wp-block-embed-vimeo\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"ast-oembed-container\" style=\"height: 100%;\"><iframe title=\"Astra Pro Cabecera m\u00f3vil - Logotipo diferente para dispositivos m\u00f3viles\" src=\"https:\/\/player.vimeo.com\/video\/542225038?dnt=1&amp;app_id=122963\" width=\"500\" height=\"261\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write\"><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Opciones de cabecera m\u00f3vil con Astra Pro<\/strong><\/h3>\n\n\n\n<p>El m\u00f3dulo Mobile Header de Astra Pro a\u00f1ade m\u00e1s opciones al dise\u00f1o junto con opciones de Colores y Fondos.<\/p>\n\n\n\n<p>La cabecera m\u00f3vil es una funci\u00f3n premium disponible con el <strong>Astra Pro<\/strong>&nbsp;<strong>Complemento<\/strong>&nbsp;plugin. Para utilizar estas funciones Pro, debe disponer de la licencia <a href=\"https:\/\/wordpress.org\/themes\/astra\/\">Tema Astra<\/a> junto con el Addon Astra Pro instalado en su sitio web.<\/p>\n\n\n\n<p class=\"has-background\" style=\"background-color:#cae3f3\"><strong>Pasos r\u00e1pidos para gestionar una cabecera m\u00f3vil con el m\u00f3dulo de cabecera m\u00f3vil<\/strong><br><strong>Paso 1:<\/strong> Aseg\u00farese de tener instalado y activado el complemento Astra Pro. <a href=\"https:\/\/git-staging.wpastra.com\/es\/docs\/how-to-install-astra-pro-addon-plugin\/\">\u00bfC\u00f3mo instalar el complemento Astra Pro?<\/a><br><strong>Segundo paso:<\/strong> Active el m\u00f3dulo desde las Opciones de Astra en la secci\u00f3n <em>WordPress Dashboard &gt; Apariencia &gt; Opciones de Astra<\/em><br><strong>Paso 3:<\/strong> Visita el personalizador [  <em>Apariencia &gt; Personalizar &gt; Cabecera &gt; Men\u00fa principal &gt; CABECERA M\u00d3VIL<\/em> ] para editar la configuraci\u00f3n del m\u00f3dulo<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2018\/04\/mobile-header-module-activation.png\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1655\" height=\"841\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2018\/04\/mobile-header-module-activation.png\" alt=\"Mobile Header Module Activation\" class=\"wp-image-26156\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2018\/04\/mobile-header-module-activation.png 1655w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2018\/04\/mobile-header-module-activation-300x152.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2018\/04\/mobile-header-module-activation-768x390.png 768w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2018\/04\/mobile-header-module-activation-1024x520.png 1024w\" sizes=\"(max-width: 1655px) 100vw, 1655px\" \/><\/a><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Active el m\u00f3dulo desde el panel de control en<strong> Apariencia &gt; Opciones Astra &gt; Cabecera M\u00f3vil.<\/strong> Tras activar el m\u00f3dulo, se a\u00f1adir\u00e1n opciones adicionales en <strong>Apariencia &gt; Personalizar &gt; Encabezado &gt; Men\u00fa principal &gt; ENCABEZADO M\u00d3VIL.<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Estilo de men\u00fa<\/strong><\/h3>\n\n\n\n<p>Elija un estilo para el men\u00fa que aparece al pulsar el bot\u00f3n de alternancia.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Desplegable <\/strong>ser\u00e1 simplemente una lista de elementos de men\u00fa que aparecer\u00e1n al pulsar el bot\u00f3n de cambio de men\u00fa. <\/li>\n\n\n\n<li><strong>Estilo Flyout<\/strong> permitir\u00e1 que el men\u00fa se deslice desde cualquier extremo de la pantalla.<\/li>\n\n\n\n<li><strong>Estilo de pantalla completa<\/strong> cubrir\u00e1 toda la pantalla y mostrar\u00e1 la opci\u00f3n de men\u00fa en el centro.<\/li>\n\n\n\n<li><strong>Sin estilo Toggle<\/strong> se <strong>no<\/strong> mostrar el men\u00fa dentro del men\u00fa hamburguesa en dispositivos responsive. El men\u00fa aparecer\u00e1 igual que en el escritorio.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Borde para los elementos del men\u00fa<\/h3>\n\n\n\n<p>Aplicar\u00e1 un borde alrededor de cada elemento del men\u00fa. Establezca el ancho del borde y luego aplique el color.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Colores y fondo para la cabecera m\u00f3vil<\/strong><\/h3>\n\n\n\n<p>El m\u00f3dulo Colores y Fondos de Astra Pro proporciona m\u00e1s opciones de Colores y Fondos para la Cabecera M\u00f3vil.<br>Tendr\u00eda que activar<strong> Colores y fondo<\/strong> y <strong>Cabecera m\u00f3vil<\/strong> m\u00f3dulos de <strong>Apariencia &gt; Opciones Astra<\/strong>.<\/p>\n\n\n\n<p>Los ajustes se encuentran en <strong>Apariencia &gt; Personalizar &gt; Encabezado &gt; Men\u00fa principal.<\/strong><\/p>\n\n\n\n<p><strong>Haga clic en el bot\u00f3n de respuesta<\/strong> y defina los colores y el fondo de la cabecera m\u00f3vil.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Fondo<\/h4>\n\n\n\n<p>Establezca el color de fondo para la cabecera m\u00f3vil o establezca la imagen de fondo y ajuste la opacidad. <a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2019\/10\/ast-2-header-bg-styling.png\">(?)<\/a><\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Men\u00fa principal y submen\u00fa<\/h4>\n\n\n\n<p>Si alguno de los estilos de men\u00fa - <strong>Pantalla desplegable o completa<\/strong> puede definir la imagen de fondo y el color de superposici\u00f3n de un men\u00fa con la opci\u00f3n <strong>Men\u00fa principal<\/strong> imagen de fondo. <a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2019\/10\/ast-2-flyout-bg-style.png\">(?)<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Astra versi\u00f3n 1.4.0 y superior proporciona una funci\u00f3n para dise\u00f1ar la cabecera m\u00f3vil por separado para dispositivos responsivos. Ofrece opciones para ajustar el punto de ruptura de la cabecera, establecer diferentes logotipos, elegir diferentes estilos de men\u00fa, establecer colores por separado para el men\u00fa. Opciones de cabecera m\u00f3vil con el tema Astra Desde el panel de control de WordPress, vaya a Apariencia &gt; Personalizar &gt; Cabecera &gt; [...]<\/p>","protected":false},"author":20,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","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":""},"docs_category":[172],"docs_tag":[],"class_list":{"0":"post-26150","1":"docs","2":"type-docs","3":"status-publish","5":"docs_category-mobile-header"},"spectra_custom_meta":{"_yoast_wpseo_primary_docs_category":["172"],"_wp_old_slug":[""],"_wp_page_template":["default"],"_edit_lock":["1685087727:88"],"_edit_last":["88"],"onesignal_meta_box_present":["1"],"onesignal_send_notification":[""],"site-sidebar-layout":["default"],"site-content-layout":["default"],"theme-transparent-header-meta":["default"],"_yoast_wpseo_content_score":["90"],"wpil_links_inbound_internal_count_data":["a:5:{i:0;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:50:\"https:\/\/wpastra.com\/docs\/mobile-header-with-astra\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:1;s:4:\"post\";O:15:\"Wpil_Model_Post\":5:{s:2:\"id\";s:5:\"23947\";s:5:\"title\";s:40:\"Change the Astra Header Breakpoint width\";s:4:\"type\";s:4:\"post\";s:7:\"content\";s:1597:\"<!-- wp:paragraph -->\n<p>In Astra&nbsp;Theme you can modify the screen size when you want to trigger the mobile header using the filter <code>astra_header_break_point<\/code> The default breakpoint is&nbsp;921px. That means&nbsp;the mobile header will be triggered at 921px screen size.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>To change&nbsp;the default breakpoint use filter. In the below example the mobile header will be triggered at 1120px screen size. Change <code>1120<\/code>&nbsp;to the screen size of your choice.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:preformatted {\"className\":\"lang:default decode:true\"} -->\n<pre class=\"wp-block-preformatted lang:default decode:true\">\/**\n * Change the breakpoint of the Astra Header Menus\n * \n * @return int Screen width when the header should change to the mobile header.\n *\/\nfunction your_prefix_change_header_breakpoint() {\n return 1120;\n};\n\nadd_filter( 'astra_header_break_point', 'your_prefix_change_header_breakpoint' );<\/pre>\n<!-- \/wp:preformatted -->\n\n<!-- wp:paragraph -->\n<p>Check out the doc that explains how to add custom PHP code using the <a href=\"https:\/\/wpastra.com\/docs\/add-custom-php-code\/#3.-in-child-theme\">child theme's functions.php<\/a> file.\u00a0<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Note:<\/strong>&nbsp;Astra version 1.4.0 and above provides an option to change the breakpoint. You don't have to use the above filter. Refer the document&nbsp;<a rel=\"noopener noreferrer\" href=\"https:\/\/wpastra.com\/docs\/mobile-header-with-astra\/#menu-breakpoint\" target=\"_blank\">here<\/a>.<\/p>\n<!-- \/wp:paragraph -->\";s:5:\"links\";O:8:\"stdClass\":4:{s:4:\"view\";s:62:\"https:\/\/wpastra.com\/docs\/change-astra-header-breakpoint-width\/\";s:4:\"edit\";N;s:6:\"export\";s:68:\"https:\/\/wpastra.com\/wp-admin\/post.php?area=wpil_export&post_id=23947\";s:7:\"refresh\";s:99:\"https:\/\/wpastra.com\/wp-admin\/admin.php?page=link_whisper&type=post_links_count_update&post_id=23947\";}}s:6:\"anchor\";s:4:\"here\";s:15:\"added_by_plugin\";b:0;}i:1;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:50:\"https:\/\/wpastra.com\/docs\/mobile-header-with-astra\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:1;s:4:\"post\";O:15:\"Wpil_Model_Post\":5:{s:2:\"id\";s:5:\"24155\";s:5:\"title\";s:15:\"Header Overview\";s:4:\"type\";s:4:\"post\";s:7:\"content\";s:1276:\"<!-- wp:paragraph -->\n<p>Astra comes with several built-in header layouts which allows you to create the impressive header. You can easily design Sticky Header, Transparent Header and can add some extra sections to the header with addons. Astra Pro allows you to add custom headers where you can design headers with any page builder.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>To explore all options with headers, go through the following links.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li><a href=\"\/docs\/primary-header\/\">Primary Header Options\u00a0<\/a><\/li><li><a href=\"\/docs\/color-typography-primary-header\/\">Color and Typography for Primary Header<\/a><\/li><li><a href=\"https:\/\/wpastra.com\/docs\/astra-transparent-header\/\">Transparent Header<\/a><\/li><li><a href=\"https:\/\/wpastra.com\/docs\/header-sections-pro\/\">Header Sections - Above and Below Header ( with Astra Pro)<\/a><\/li><li><a href=\"https:\/\/wpastra.com\/docs\/sticky-header-pro\/\">Sticky Header (with Astra Pro)<\/a><\/li><li><a href=\"https:\/\/wpastra.com\/docs\/page-headers-overview\/\">Page Headers\u00a0(with Astra Pro)\u00a0<\/a><\/li><li><a rel=\"noopener noreferrer\" href=\"https:\/\/wpastra.com\/docs\/mobile-header-with-astra\/\" target=\"_blank\">Mobile Header with Astra (with Astra Pro)\u00a0<\/a><\/li><\/ul>\n<!-- \/wp:list -->\";s:5:\"links\";O:8:\"stdClass\":4:{s:4:\"view\";s:41:\"https:\/\/wpastra.com\/docs\/header-overview\/\";s:4:\"edit\";N;s:6:\"export\";s:68:\"https:\/\/wpastra.com\/wp-admin\/post.php?area=wpil_export&post_id=24155\";s:7:\"refresh\";s:99:\"https:\/\/wpastra.com\/wp-admin\/admin.php?page=link_whisper&type=post_links_count_update&post_id=24155\";}}s:6:\"anchor\";s:43:\"Mobile Header with Astra (with Astra Pro)\u00a0\";s:15:\"added_by_plugin\";b:0;}i:2;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:50:\"https:\/\/wpastra.com\/docs\/mobile-header-with-astra\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:1;s:4:\"post\";O:15:\"Wpil_Model_Post\":5:{s:2:\"id\";s:5:\"28466\";s:5:\"title\";s:37:\"Mobile Header with Above\/Below Header\";s:4:\"type\";s:4:\"post\";s:7:\"content\";s:2839:\"<!-- wp:paragraph -->\n<p><a href=\"https:\/\/wpastra.com\/docs\/mobile-header-with-astra\/\">Mobile Header addon<\/a> available with Astra Pro version 1.4.0 and above.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>This is a premium feature available with\u00a0<strong>Astra Pro<\/strong>\u00a0<strong>Addon<\/strong>\u00a0plugin.<a href=\"https:\/\/wordpress.org\/themes\/astra\"> <\/a>To use these Pro features, you need to have the <a href=\"https:\/\/wordpress.org\/themes\/astra\">Astra theme<\/a> along with the Astra Pro Addon installed on your website. <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Also, this addon adds more features to the <strong>Above Header<\/strong> and <strong>Below Header.<\/strong> <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>You would need to activate&nbsp;<strong>Mobile Header<\/strong> and<strong> Header Sections<\/strong> addons from&nbsp;<strong>Appearance &gt; Astra Options.<\/strong><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Settings can be found under <strong>Appearance &gt; Customize &gt; Header &gt; Above\/Below Header &gt;&nbsp;MOBILE HEADER.<\/strong><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li><strong>Display on Mobile Devices: <\/strong>This&nbsp;setting lets you choose whether you want to display above\/below header sections on mobile or not.<\/li><li><strong style=\"font-size: 16px;\">Merge Menu on Mobile Devices: <\/strong>If Menu is selected for both\/either of the section in the above\/below header, this option is useful. It allows choosing whether to merge above\/below the header menu with the primary menu on mobile. <ul><li>If you select&nbsp;it to merge, above\/below header menu will appear inside the primary header toggle button.<\/li><li>If you do not want it to merge, a separate toggle for above\/below header menu will appear&nbsp;on mobile.<\/li><li>For separate toggle button, all menu options i.e. Menu Style,&nbsp;Toggle Button Style,&nbsp;Toggle Button Color,&nbsp;Menu Label on Small Devices will be available.<\/li><li>This allows setting&nbsp;different layout for above\/below header menu and primary header menu. <\/li><\/ul><\/li><li><strong>Swap sections on mobile devices:<\/strong> It will alter the sections of above\/below header on mobile. Enabling this will swap section 1 and section 2. <\/li><li><strong>Layout:<\/strong> Mobile Header Alignment - This allows to display the above\/below header section inline or stacked&nbsp;on mobile devices.<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:image {\"id\":39225,\"align\":\"center\",\"linkDestination\":\"media\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-above-header-mobile-layout.png\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-above-header-mobile-layout.png\" alt=\"\" class=\"wp-image-39225\"\/><\/a><\/figure><\/div>\n<!-- \/wp:image -->\";s:5:\"links\";O:8:\"stdClass\":4:{s:4:\"view\";s:63:\"https:\/\/wpastra.com\/docs\/mobile-header-with-above-below-header\/\";s:4:\"edit\";N;s:6:\"export\";s:68:\"https:\/\/wpastra.com\/wp-admin\/post.php?area=wpil_export&post_id=28466\";s:7:\"refresh\";s:99:\"https:\/\/wpastra.com\/wp-admin\/admin.php?page=link_whisper&type=post_links_count_update&post_id=28466\";}}s:6:\"anchor\";s:19:\"Mobile Header addon\";s:15:\"added_by_plugin\";b:0;}i:3;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:50:\"https:\/\/wpastra.com\/docs\/mobile-header-with-astra\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:1;s:4:\"post\";O:15:\"Wpil_Model_Post\":5:{s:2:\"id\";s:5:\"30662\";s:5:\"title\";s:38:\"Astra Options that won't work with AMP\";s:4:\"type\";s:4:\"post\";s:7:\"content\";s:4763:\"<!-- wp:paragraph -->\n<p>As we know AMP does not allow JS to render on mobile devices. It also restricts the CSS size to 50 KB. Some advanced options from Astra theme and Astra Pro needs JS and extra CSS to work. With the restriction of JS and CSS, some Astra options will not work when AMP is enabled.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Though some Astra options will not work on AMP pages, switching to AMP with these options will not break anything on your website.  These features will be replaced by alternative options from the Astra itself. <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>Below is the list for the Astra Pro addons that will not work with AMP -<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li><strong>Above and Below Header<\/strong> - If above\/below header is designed with Astra Pro's <a rel=\"dofollow noopener noreferrer\" aria-label=\"Header Sections (opens in a new tab)\" href=\"https:\/\/wpastra.com\/docs\/header-sections-pro\/\" target=\"_blank\">Header Sections<\/a> addon then it will not appear on AMP pages.<\/li><li><strong>Sticky Header <\/strong>- Header designed with Astra Pro's <a rel=\"dofollow noopener noreferrer\" aria-label=\"Sticky Header (opens in a new tab)\" href=\"https:\/\/wpastra.com\/docs\/sticky-header-pro\/\" target=\"_blank\">Sticky Header<\/a> addon will not work on AMP pages as it needs JS to work.<\/li><li><strong>Scroll To Top<\/strong> - If you have enabled Astra Pro's<a rel=\"dofollow noopener noreferrer\" aria-label=\" Scroll To Top (opens in a new tab)\" href=\"https:\/\/wpastra.com\/docs\/scroll-to-top-pro\/\" target=\"_blank\"> Scroll To Top<\/a> addon, it will not display on AMP pages.<\/li><li><strong>Mega Menu<\/strong> - The feature offered by Astra Pro's <a rel=\"dofollow noopener noreferrer\" aria-label=\"Nav Menu (opens in a new tab)\" href=\"https:\/\/wpastra.com\/docs\/nav-menu-addon\/\" target=\"_blank\">Nav Menu<\/a> addon will not work on AMP pages. All menu items will display as a normal drop-down. Template added from the page builder will not display, instead of the template a menu item text will display.<\/li><li><strong>Custom Layouts<\/strong> - Layouts designed with page builder in <a rel=\"dofollow noopener noreferrer\" href=\"https:\/\/wpastra.com\/docs\/custom-layouts-pro\/\" target=\"_blank\">Custom Layouts<\/a> addon will display without any style. If page builder used is not supported by AMP then only content from the layout will display and AMP will skip the style. So it is recommended to disable custom layout on AMP. You can find a setting on individual Custom Layout (<a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/03\/disable-custom-layout-for-amp.png\" target=\"_blank\" rel=\"dofollow noopener noreferrer\" aria-label=\"Screenshot (opens in a new tab)\">Screenshot<\/a>).<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>Apart from the above, some options from other Astra Pro addons will not work. They are as follows - <\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li><strong>Search Style<\/strong> - Advanced <a rel=\"dofollow noopener noreferrer\" aria-label=\"search styles (opens in a new tab)\" href=\"https:\/\/wpastra.com\/introducing-search-styles\/\" target=\"_blank\">search styles<\/a> like Full-screen, Header cover search, the Search box will not work on AMP pages. Only slide<\/li><li><strong>Menu Style<\/strong> for Mobile Header - Astra Pro's Mobile Header addon provide options for <a rel=\"dofollow noopener noreferrer\" href=\"https:\/\/wpastra.com\/docs\/mobile-header-with-astra\/#menu-style\" target=\"_blank\">Menu Style<\/a> - Flyout, Full-Screen, No Toggle style. These styles will not work on AMP pages. Instead of these styles, a simple drop-down menu will display.<\/li><li><strong>Toggle Button Style and color <\/strong>- For Mobile header, <a rel=\"dofollow noopener noreferrer\" aria-label=\"Toggle Button styles (opens in a new tab)\" href=\"https:\/\/wpastra.com\/docs\/mobile-header-with-astra\/#toggle-button-style-toggle-button-color-and-border-radius\" target=\"_blank\">Toggle Button styles<\/a> like <g class=\"gr_ gr_14 gr-alert gr_gramm gr_inline_cards gr_disable_anim_appear Grammar only-ins doubleReplace replaceWithoutSep\" id=\"14\" data-gr-id=\"14\">outline<\/g>, minimal and Toggle Button Color will not work. Instead of this a default Fill style will be applied with theme base color.<\/li><li><strong>Infinite Scroll<\/strong> on blog\/archive page - Astra Pro's Blog pro addon offers <a rel=\"dofollow noopener noreferrer\" aria-label=\"pagination  (opens in a new tab)\" href=\"https:\/\/wpastra.com\/docs\/blog-archive-blog-pro\/#post-pagination\" target=\"_blank\">pagination <\/a>option. If you select Infinite Scroll for blog\/archive page, it will not work on AMP pages as it needs JS. Instead of the infinite scroll, pagination will be replaced with numbers.<\/li><\/ul>\n<!-- \/wp:list -->\";s:5:\"links\";O:8:\"stdClass\":4:{s:4:\"view\";s:63:\"https:\/\/wpastra.com\/docs\/astra-options-that-wont-work-with-amp\/\";s:4:\"edit\";N;s:6:\"export\";s:68:\"https:\/\/wpastra.com\/wp-admin\/post.php?area=wpil_export&post_id=30662\";s:7:\"refresh\";s:99:\"https:\/\/wpastra.com\/wp-admin\/admin.php?page=link_whisper&type=post_links_count_update&post_id=30662\";}}s:6:\"anchor\";s:10:\"Menu Style\";s:15:\"added_by_plugin\";b:0;}i:4;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:50:\"https:\/\/wpastra.com\/docs\/mobile-header-with-astra\/\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:1;s:4:\"post\";O:15:\"Wpil_Model_Post\":5:{s:2:\"id\";s:5:\"37127\";s:5:\"title\";s:51:\"How to add Logo, Favicon and Site Title with Astra?\";s:4:\"type\";s:4:\"post\";s:7:\"content\";s:4540:\"<!-- wp:paragraph -->\n<p>Astra allows easy settings to add site identities like -<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li>Logo<\/li><li>Retina Logo<\/li><li>Logo for mobile devices<\/li><li>Site Title<\/li><li>Site Tagline<\/li><li>Site Icon (favicon).<\/li><\/ul>\n<!-- \/wp:list -->\n\n<!-- wp:paragraph -->\n<p>Settings can be found in the customizer under<strong> Customize > Header > Site Identity<\/strong><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":4} -->\n<h4>Logo (Normal and Retina)<\/h4>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>For the <strong>normal<\/strong> logo select a logo image from Media Library. Astra also allows adding Different Logos for <strong>retina<\/strong> devices. This 2x sized logo is necessary on <strong>high definition <\/strong>screens so the logo won\u2019t look blurred. For detailed information about the retina logo please refer the link <a rel=\"noopener noreferrer\" href=\"https:\/\/wpastra.com\/introducing-retina-logo\/\" target=\"_blank\">here<\/a>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p>In case the normal logo is big in size and covers most of the header space on <strong>mobile devices<\/strong> - choose to set Different Logos for mobile devices and add a separate smaller logo. For more details read the article for <a rel=\"noopener noreferrer\" href=\"https:\/\/wpastra.com\/docs\/mobile-header-with-astra\/\" target=\"_blank\">Mobile Header with Astra.<\/a><\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":39688,\"align\":\"center\",\"linkDestination\":\"media\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/astra-2-logo.png\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/astra-2-logo.png\" alt=\"\" class=\"wp-image-39688\"\/><\/a><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:heading {\"level\":4} -->\n<h4>Logo Width<\/h4>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>You can easily adjust the logo width with a slider. Set the toggle button to adjust logo width on the desktop, tablet, and mobile. Astra physically crops the logo in an appropriate aspect ratio which helps reducing page load. To explore how Astra handles the logo width, please refer to the link <a rel=\"noopener noreferrer\" href=\"https:\/\/wpastra.com\/resize-logo\/\" target=\"_blank\">here<\/a>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:heading {\"level\":4} -->\n<h4>Site Title &amp;Tagline<\/h4>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Site Title is a name for the website. While the Tagline is the one-line description for the site. Site Title and Tagline will display in the title bar of a web browser. Manage the font size for both from <strong>Typography > Primary header<\/strong>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:paragraph -->\n<p><strong>Inline Alignment -<\/strong> This option sets logo and site title - tagline, in one line. It will be visible only when the site title or\/and the tagline is enabled.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":39693,\"align\":\"center\",\"linkDestination\":\"media\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/astra-2-site-title.png\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/astra-2-site-title.png\" alt=\"\" class=\"wp-image-39693\"\/><\/a><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:heading {\"level\":4} -->\n<h4>Site Icon (Favicon)<\/h4>\n<!-- \/wp:heading -->\n\n<!-- wp:paragraph -->\n<p>It\u2019s a small image icon that can be seen in the tab of a web browser, bookmark bars, and within the WordPress mobile apps. You can set it with the site icon option. The recommended&nbsp;size for a favicon is 512 pixels. Know more about Site Icon <a href=\"https:\/\/wpastra.com\/docs\/favicon-site-icon\/\" target=\"_blank\" rel=\"noopener noreferrer\">here<\/a>.<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:image {\"id\":39696,\"align\":\"center\",\"linkDestination\":\"media\"} -->\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/astra-2-favicon.png\"><img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/08\/astra-2-favicon.png\" alt=\"\" class=\"wp-image-39696\"\/><\/a><\/figure><\/div>\n<!-- \/wp:image -->\n\n<!-- wp:paragraph -->\n<p><strong>Related Document<\/strong> -<\/p>\n<!-- \/wp:paragraph -->\n\n<!-- wp:list -->\n<ul><li><a rel=\"noopener noreferrer\" href=\"https:\/\/wpastra.com\/docs\/why-is-my-logo-blurry\/\" target=\"_blank\">Why is my logo blurry?<\/a><\/li><li><a rel=\"noopener noreferrer\" href=\"https:\/\/wpastra.com\/docs\/mobile-header-with-astra\/\" target=\"_blank\">Mobile Header with Astra<\/a><\/li><\/ul>\n<!-- \/wp:list -->\";s:5:\"links\";O:8:\"stdClass\":4:{s:4:\"view\";s:46:\"https:\/\/wpastra.com\/docs\/site-identity-free-2\/\";s:4:\"edit\";N;s:6:\"export\";s:68:\"https:\/\/wpastra.com\/wp-admin\/post.php?area=wpil_export&post_id=37127\";s:7:\"refresh\";s:99:\"https:\/\/wpastra.com\/wp-admin\/admin.php?page=link_whisper&type=post_links_count_update&post_id=37127\";}}s:6:\"anchor\";s:25:\"Mobile Header with Astra.\";s:15:\"added_by_plugin\";b:0;}}"],"wpil_links_outbound_internal_count_data":["a:0:{}"],"wpil_links_outbound_external_count_data":["a:8:{i:0;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:34:\"https:\/\/wordpress.org\/themes\/astra\";s:4:\"host\";s:13:\"wordpress.org\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:11:\"Astra theme\";s:15:\"added_by_plugin\";b:0;}i:1;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:68:\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/10\/ast-2-mobile-logo.png\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:3:\"(?)\";s:15:\"added_by_plugin\";b:0;}i:2;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:76:\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/10\/ast-2-mobile-toggle-style.png\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:3:\"(?)\";s:15:\"added_by_plugin\";b:0;}i:3;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:73:\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/10\/ast-2-toggle-menu-name.png\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:3:\"(?)\";s:15:\"added_by_plugin\";b:0;}i:4;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:77:\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/10\/ast-2-mobile-header-layout.png\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:3:\"(?)\";s:15:\"added_by_plugin\";b:0;}i:5;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:82:\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/04\/mobile-header-module-activation.png\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:125:\"<img src=\"https:\/\/wpastra.com\/wp-content\/uploads\/2018\/04\/mobile-header-module-activation.png\" alt=\"\" class=\"wp-image-26156\"\/>\";s:15:\"added_by_plugin\";b:0;}i:6;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:74:\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/10\/ast-2-header-bg-styling.png\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:3:\"(?)\";s:15:\"added_by_plugin\";b:0;}i:7;O:15:\"Wpil_Model_Link\":6:{s:3:\"url\";s:72:\"https:\/\/wpastra.com\/wp-content\/uploads\/2019\/10\/ast-2-flyout-bg-style.png\";s:4:\"host\";s:11:\"wpastra.com\";s:8:\"internal\";b:0;s:4:\"post\";N;s:6:\"anchor\";s:3:\"(?)\";s:15:\"added_by_plugin\";b:0;}}"],"tap_disable_autolinker":["no"],"tap_autolink_inside_heading":["global"],"tap_autolink_random_placement":["global"],"tap_post_autolinker_limit":["0"],"_ppc_meta_key":["a:8:{s:20:\"ppc_key5d92f85d42273\";s:60:\"Images &amp; Names Correctly. Title &amp; Alt Tags are Given\";s:8:\"ppc_key4\";s:15:\"Formatting Done\";s:8:\"ppc_key2\";s:23:\"Featured Image Assigned\";s:8:\"ppc_key3\";s:17:\"Category Selected\";s:8:\"ppc_key5\";s:15:\"Title is Catchy\";s:8:\"ppc_key6\";s:22:\"Social Images Assigned\";s:8:\"ppc_key7\";s:8:\"Done SEO\";s:8:\"ppc_key8\";s:28:\"Spelling and Grammar Checked\";}"],"_yoast_wpseo_title":["How to Manage a Mobile Header with Astra?"],"astra_style_timestamp_css":["1573724686"],"_oembed_c1ed1d5fa226aef45193e60eb989f1bd":["<iframe title=\"ast-2-mobile-header-layouts\" src=\"https:\/\/player.vimeo.com\/video\/484494943?dnt=1&amp;app_id=122963\" width=\"500\" height=\"252\" frameborder=\"0\" allow=\"autoplay; fullscreen\" allowfullscreen><\/iframe>"],"_oembed_time_c1ed1d5fa226aef45193e60eb989f1bd":["1606493387"],"_oembed_0fa4c7701f50eb8eb47f17372621b818":["<iframe title=\"ast-2-mobile-header-diff-logo\" src=\"https:\/\/player.vimeo.com\/video\/484495367?dnt=1&amp;app_id=122963\" width=\"500\" height=\"255\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen><\/iframe>"],"_oembed_time_0fa4c7701f50eb8eb47f17372621b818":["1619539860"],"_oembed_0e4be11c33c85f462c2ebb61b714d74b":["<iframe title=\"ast-2-mobile-dropdown-target\" src=\"https:\/\/player.vimeo.com\/video\/484495429?dnt=1&amp;app_id=122963\" width=\"500\" height=\"297\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen><\/iframe>"],"_oembed_time_0e4be11c33c85f462c2ebb61b714d74b":["1619540222"],"_oembed_25507e7769dceaf7feeec3f72c8dda84":["<iframe title=\"ast-2-mobile-header-layouts\" src=\"https:\/\/player.vimeo.com\/video\/484494943?dnt=1&amp;app_id=122963\" width=\"1200\" height=\"606\" frameborder=\"0\" allow=\"autoplay; fullscreen\" allowfullscreen><\/iframe>"],"_oembed_time_25507e7769dceaf7feeec3f72c8dda84":["1606493633"],"_oembed_a56dac8f491bd163546eb7e6ec23eebc":["<iframe title=\"ast-2-mobile-header-diff-logo\" src=\"https:\/\/player.vimeo.com\/video\/484495367?dnt=1&amp;app_id=122963\" width=\"1200\" height=\"612\" frameborder=\"0\" allow=\"autoplay; fullscreen\" allowfullscreen><\/iframe>"],"_oembed_time_a56dac8f491bd163546eb7e6ec23eebc":["1606493633"],"_oembed_05b2fa61edaad5a03d405b04c7566ed6":["<iframe title=\"ast-2-mobile-dropdown-target\" src=\"https:\/\/player.vimeo.com\/video\/484495429?dnt=1&amp;app_id=122963\" width=\"1200\" height=\"713\" frameborder=\"0\" allow=\"autoplay; fullscreen\" allowfullscreen><\/iframe>"],"_oembed_time_05b2fa61edaad5a03d405b04c7566ed6":["1606493633"],"_yoast_wpseo_estimated-reading-time-minutes":["4"],"_oembed_f70e067f6fdc1a41d633353d79bb7793":["<iframe title=\"Astra Pro Mobile Header - Mobile Menu\" src=\"https:\/\/player.vimeo.com\/video\/542222622?h=c39d78f3e7&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"260\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen><\/iframe>"],"_oembed_time_f70e067f6fdc1a41d633353d79bb7793":["1685087726"],"_oembed_fa9de42da563e9542618e39242bbc873":["<iframe title=\"Astra Pro Mobile Header - Different Logo for Mobile Devices\" src=\"https:\/\/player.vimeo.com\/video\/542225038?h=9b2de6c632&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"261\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen><\/iframe>"],"_oembed_time_fa9de42da563e9542618e39242bbc873":["1685087727"],"_oembed_c71b46cbfd551588449599f5b256f9af":["<iframe title=\"Astra Pro Mobile Header - Dropdown Target\" src=\"https:\/\/player.vimeo.com\/video\/542227557?h=3219e52cd1&amp;dnt=1&amp;app_id=122963\" width=\"500\" height=\"261\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen><\/iframe>"],"_oembed_time_c71b46cbfd551588449599f5b256f9af":["1685087726"],"wp_last_modified_info":["May 26, 2023 @ 1:25 PM"],"wplmi_shortcode":["[lmt-post-modified-info]"],"_oembed_ec3f503df0040e02cff2293550bb0aa8":["<iframe title=\"Astra Pro Mobile Header - Mobile Menu\" src=\"https:\/\/player.vimeo.com\/video\/542222622?dnt=1&amp;app_id=122963\" width=\"1200\" height=\"625\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen><\/iframe>"],"_oembed_time_ec3f503df0040e02cff2293550bb0aa8":["1619540236"],"_oembed_989ada3a7f4ef3952de282576b70e47d":["<iframe title=\"Astra Pro Mobile Header - Different Logo for Mobile Devices\" src=\"https:\/\/player.vimeo.com\/video\/542225038?dnt=1&amp;app_id=122963\" width=\"1200\" height=\"627\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen><\/iframe>"],"_oembed_time_989ada3a7f4ef3952de282576b70e47d":["1619540236"],"_oembed_8d0012c6793703f436bd883abaf3a3bb":["<iframe title=\"Astra Pro Mobile Header - Dropdown Target\" src=\"https:\/\/player.vimeo.com\/video\/542227557?dnt=1&amp;app_id=122963\" width=\"640\" height=\"334\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\" allowfullscreen><\/iframe>"],"_oembed_time_8d0012c6793703f436bd883abaf3a3bb":["1619540236"],"_ht_kb_post_views_count":["55"],"_ht_kb_usefulness":["0"],"_ht_article_order_172":["26150"],"views":["27374"],"helpful":["19"],"unhelpful":["95"],"redirects":["52"],"rank_math_primary_docs_category":["172"],"rank_math_title":["How to Manage a Mobile Header with Astra?"],"rank_math_news_sitemap_robots":["index"],"rank_math_robots":["a:1:{i:0;s:5:\"index\";}"],"rank_math_analytic_object_id":["1113"],"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-62169d527e18d\";s:9:\"isPrimary\";s:1:\"1\";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\/542222622\";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:105:\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/05\/How-to-Manage-a-Mobile-Header-with-Astra-2.png\";s:7:\"hasPart\";a:0:{}s:16:\"isFamilyFriendly\";s:1:\"1\";}","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-62169d527e192\";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\/542227557\";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:105:\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/05\/How-to-Manage-a-Mobile-Header-with-Astra-1.png\";s:7:\"hasPart\";a:0:{}s:16:\"isFamilyFriendly\";s:1:\"1\";}","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-62169d527e193\";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\/542225038\";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:105:\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2023\/05\/How-to-Manage-a-Mobile-Header-with-Astra-3.png\";s:7:\"hasPart\";a:0:{}s:16:\"isFamilyFriendly\";s:1:\"1\";}"],"rank_math_seo_score":["24"],"rank_math_internal_links_processed":["1"],"rank_math_og_content_image":["a:2:{s:5:\"check\";s:32:\"69337794427ca767b7848568de6fec78\";s:6:\"images\";a:1:{i:0;i:26156;}}"],"rank_math_shortcode_schema_s-62169d527e18d":["1666523"],"rank_math_shortcode_schema_s-62169d527e192":["1666524"],"rank_math_shortcode_schema_s-62169d527e193":["1666525"],"_wplmi_last_modified":["2023-05-26 13:25:24"],"pfd_related_docs":["a:4:{i:0;s:10:\"     70286\";i:1;s:10:\"     70152\";i:2;s:10:\"     89779\";i:3;s:9:\"    73672\";}"],"pfd_manual_related_docs":["1"],"_wpml_media_duplicate":["1"],"_trp_automatically_translated_slug_es_ES":["cabecera-movil-con-astra"],"_oembed_c09b264b36504dacd431ce8d0e5c3e90":["<iframe title=\"Astra Pro Mobile Header - Mobile Menu\" src=\"https:\/\/player.vimeo.com\/video\/542222622?dnt=1&amp;app_id=122963\" width=\"500\" height=\"260\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write\"><\/iframe>"],"_oembed_time_c09b264b36504dacd431ce8d0e5c3e90":["1716197769"],"_oembed_36c0751dd433a35963db0bdb076d4a54":["<iframe title=\"Astra Pro Mobile Header - Dropdown Target\" src=\"https:\/\/player.vimeo.com\/video\/542227557?dnt=1&amp;app_id=122963\" width=\"500\" height=\"261\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write\"><\/iframe>"],"_oembed_time_36c0751dd433a35963db0bdb076d4a54":["1716197769"],"_oembed_9d65ec32e7090a96ef56875a7d99667d":["<iframe title=\"Astra Pro Mobile Header - Different Logo for Mobile Devices\" src=\"https:\/\/player.vimeo.com\/video\/542225038?dnt=1&amp;app_id=122963\" width=\"500\" height=\"261\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture; clipboard-write\"><\/iframe>"],"_oembed_time_9d65ec32e7090a96ef56875a7d99667d":["1716197770"],"_uag_page_assets":["a:9:{s:3:\"css\";s:3730:\" .uagb-block-7451fa2e.wp-block-uagb-inline-notice .uagb-notice-title{padding-left: 15px;padding-right: 15px;padding-top: 15px;padding-bottom: 15px;} .uagb-block-7451fa2e .uagb-notice-text{padding-left: 15px;padding-right: 15px;padding-top: 15px;padding-bottom: 15px;background-color: #fff8e1;border: 2px solid #fdf4c9;border-bottom-left-radius: 3px;border-bottom-right-radius: 3px;} .uagb-block-7451fa2e.uagb-dismissable button[type=\"button\"] svg{width: 16px;height: 16px;} .uagb-block-7451fa2e.uagb-dismissable > svg{width: 16px;height: 16px;} .uagb-block-7451fa2e .uagb-notice-title{background-color: #fdf4c9;border-top-right-radius: 3px;border-top-left-radius: 3px;}@media only screen and (max-width: 976px) { .uagb-block-7451fa2e .uagb-notice-text{padding-left: 15px;padding-right: 15px;padding-top: 15px;padding-bottom: 15px;} .uagb-block-7451fa2e .uagb-notice-title{padding-left: 15px;padding-right: 15px;padding-top: 15px;padding-bottom: 15px;}}@media only screen and (max-width: 767px) { .uagb-block-7451fa2e .uagb-notice-text{padding-left: 15px;padding-right: 15px;padding-top: 15px;padding-bottom: 15px;} .uagb-block-7451fa2e .uagb-notice-title{padding-left: 15px;padding-right: 15px;padding-top: 15px;padding-bottom: 15px;}}.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:271:\"document.addEventListener(\"DOMContentLoaded\", function(){ window.addEventListener( 'DOMContentLoaded', function() {\n\tUAGBInlineNotice.init( {\"c_id\":null,\"cookies\":false,\"close_cookie_days\":1,\"noticeDismiss\":\"\",\"icon\":\"rectangle-xmark\"}, '.uagb-block-7451fa2e' );\n});\n });\";s:18:\"current_block_list\";a:10:{i:0;s:14:\"core\/paragraph\";i:1;s:18:\"uagb\/inline-notice\";i:2;s:10:\"core\/embed\";i:3;s:12:\"core\/heading\";i:4;s:14:\"core\/separator\";i:5;s:10:\"core\/image\";i:6;s:9:\"core\/list\";i:7;s:14:\"core\/list-item\";i:8;s:14:\"uagb\/container\";i:9;s:14:\"core\/shortcode\";}s:8:\"uag_flag\";b:1;s:11:\"uag_version\";s:10:\"1776521973\";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":false,"thumbnail":false,"medium":false,"medium_large":false,"large":false,"1536x1536":false,"2048x2048":false,"trp-custom-language-flag":false},"uagb_author_info":{"display_name":"Anjali","author_link":"https:\/\/git-staging.wpastra.com\/es\/author\/anjalic\/"},"uagb_comment_info":0,"uagb_excerpt":"Astra version 1.4.0 and above provides a feature to design Mobile Header separately for responsive devices. It offers options to adjust Header Breakpoint, set different Logos, choose different Menu Styles, set Colors separately for the menu. Mobile Header Options with Astra Theme From your WordPress dashboard navigate to Appearance &gt; Customize &gt; Header &gt; Primary&hellip;","_links":{"self":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/26150"}],"collection":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/comments?post=26150"}],"version-history":[{"count":0,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/26150\/revisions"}],"wp:attachment":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/media?parent=26150"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_category?post=26150"},{"taxonomy":"docs_tag","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_tag?post=26150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}