{"id":132809,"date":"2022-09-12T13:44:08","date_gmt":"2022-09-12T08:14:08","guid":{"rendered":"https:\/\/git-staging.wpastra.com\/?post_type=docs&#038;p=132809"},"modified":"2022-09-19T07:33:50","modified_gmt":"2022-09-19T02:03:50","slug":"transparent-header-menu-color-not-working-with-mobile-breakpoint","status":"publish","type":"docs","link":"https:\/\/git-staging.wpastra.com\/es\/docs\/transparent-header-menu-color-not-working-with-mobile-breakpoint\/","title":{"rendered":"El color transparente del men\u00fa de cabecera no funciona con Mobile Breakpoint"},"content":{"rendered":"<p>Astra ofrece la opci\u00f3n de cambiar <i>Men\u00fa Punto de interrupci\u00f3n<\/i> para cabecera m\u00f3vil ( configuraci\u00f3n - Dise\u00f1o &gt; Cabecera &gt; Cabecera principal &gt; Cabecera m\u00f3vil ). Al aumentar este punto de interrupci\u00f3n, un color de men\u00fa transparente no funciona en dispositivos con la anchura de 768px a la anchura del punto de interrupci\u00f3n del men\u00fa.<\/p>\n\n\n\n<p>Para solucionarlo, a\u00f1ada el siguiente c\u00f3digo al archivo functions.php del tema hijo. <\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>\/**\n* Function to disable the transparent header below 800px screen\n*\n* @return void\n*\/\nfunction disable_transparent_header_mobile() {\n    ?&gt;\n    &lt;script type=\"text\/javascript\" &gt;\n    jQuery(window).on('resize', function(){\n        if ( '800' &gt;= jQuery( window ).width() ) {\n            if ( jQuery( 'body' ).hasClass( 'ast-theme-transparent-header' ) ) {\n                jQuery( 'body' ).removeClass( 'ast-theme-transparent-header' );\n            }\n        } else {\n            if ( !jQuery( 'body' ).hasClass( 'ast-theme-transparent-header' ) ) {\n                jQuery( 'body' ).addClass( 'ast-theme-transparent-header' );\n            }\n        }\n    });\n    jQuery( document ).ready(function() {\n        if ( '800' &gt;= jQuery( window ).width() ) {\n            if ( jQuery( 'body' ).hasClass( 'ast-theme-transparent-header' ) ) {\n                jQuery( 'body' ).removeClass( 'ast-theme-transparent-header' );\n            }\n        } else {\n            if ( !jQuery( 'body' ).hasClass( 'ast-theme-transparent-header' ) ) {\n                jQuery( 'body' ).addClass( 'ast-theme-transparent-header' );\n            }\n        }\n    });\n    &lt;\/script&gt;\n    &lt;?php\n}\n\nadd_action( 'wp_footer', 'disable_transparent_header_mobile' );<\/code><\/pre>\n\n\n\n<p><strong>Nota importante:<\/strong> Sustituya 800 por el ancho del punto de interrupci\u00f3n del men\u00fa que configur\u00f3 en el personalizador. <\/p>","protected":false},"excerpt":{"rendered":"<p>Astra ofrece una opci\u00f3n para cambiar el punto de interrupci\u00f3n del men\u00fa para la cabecera m\u00f3vil (configuraci\u00f3n - Dise\u00f1o &gt; Cabecera &gt; Cabecera principal &gt; Cabecera m\u00f3vil). Al aumentar este punto de ruptura, el color transparente del men\u00fa no funciona en dispositivos con un ancho de 768px al ancho del punto de ruptura del men\u00fa. Para solucionarlo a\u00f1ada el siguiente c\u00f3digo a [...]<\/p>","protected":false},"author":86,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"","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":"","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":[2113],"docs_tag":[],"class_list":{"0":"post-132809","1":"docs","2":"type-docs","3":"status-publish","5":"docs_category-custom-css"},"spectra_custom_meta":{"wp_last_modified_info":["September 19, 2022 @ 7:33 AM"],"wplmi_shortcode":["[lmt-post-modified-info]"],"_edit_lock":["1710509949:109"],"_wplmi_last_modified":["2022-09-19 07:33:50"],"rank_math_internal_links_processed":["1"],"rank_math_seo_score":["6"],"_edit_last":["86"],"tap_disable_autolinker":["no"],"tap_autolink_inside_heading":["global"],"tap_autolink_random_placement":["global"],"tap_post_autolinker_limit":["0"],"views":["7606"],"rank_math_primary_docs_category":["2113"],"rank_math_analytic_object_id":["1936"],"helpful":["1"],"unhelpful":["3"],"redirects":["6"],"pfd_related_docs":[""],"_trp_automatically_translated_slug_es_ES":["el-color-transparente-del-menu-de-cabecera-no-funciona-con-el-punto-de-interrupcion-movil"],"_uag_page_assets":["a:9:{s:3:\"css\";s:2495:\".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:0:\"\";s:18:\"current_block_list\";a:4:{i:0;s:14:\"core\/paragraph\";i:1;s:9:\"core\/code\";i:2;s:14:\"uagb\/container\";i:3;s:14:\"core\/shortcode\";}s:8:\"uag_flag\";b:1;s:11:\"uag_version\";s:10:\"1776604573\";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":"Arindam","author_link":"https:\/\/git-staging.wpastra.com\/es\/author\/arindamm\/"},"uagb_comment_info":0,"uagb_excerpt":"Astra offers an option to change Menu Breakpoint for Mobile Header ( setting &#8211; Layout &gt; Header &gt; Primary header &gt; Mobile header ). When you increase this breakpoint, a transparent menu color does not work on devices with the width from 768px to Menu Breakpoint width. To fix this add the following code to&hellip;","_links":{"self":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/132809"}],"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\/86"}],"replies":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/comments?post=132809"}],"version-history":[{"count":1,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/132809\/revisions"}],"predecessor-version":[{"id":175318,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/132809\/revisions\/175318"}],"wp:attachment":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/media?parent=132809"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_category?post=132809"},{"taxonomy":"docs_tag","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_tag?post=132809"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}