{"id":30122,"date":"2019-01-23T00:00:00","date_gmt":"2019-01-22T18:30:00","guid":{"rendered":"https:\/\/git-staging.wpastra.com\/?post_type=docs&#038;p=30122"},"modified":"2023-06-19T09:23:04","modified_gmt":"2023-06-19T03:53:04","slug":"change-the-direction-for-submenu-opening","status":"publish","type":"docs","link":"https:\/\/git-staging.wpastra.com\/es\/docs\/change-the-direction-for-submenu-opening\/","title":{"rendered":"\u00bfC\u00f3mo cambiar la direcci\u00f3n de apertura de los submen\u00fas?"},"content":{"rendered":"<p>Por defecto, los submen\u00fas se abrir\u00e1n a la derecha. A veces, si la estructura del submen\u00fa es larga, puede abrirse fuera de la ventana gr\u00e1fica de la derecha y el usuario no podr\u00e1 verlo.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><img decoding=\"async\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2019\/08\/Screen-Recording-2019-01-23-at-05.50.50.14-PM.gif\" alt=\"Astra Demo Submenu Opening\"\/><\/figure>\n\n\n\n<p>Para solucionarlo, a\u00f1ada la clase CSS mencionada a continuaci\u00f3n al men\u00fa principal cuyo submen\u00fa se muestra fuera de la ventana gr\u00e1fica.<\/p>\n\n\n\n<pre class=\"wp-block-code\" data-no-translation=\"\" data-no-auto-translation=\"\"><code>ast-left-align-sub-menu&nbsp;<\/code><\/pre>\n\n\n\n<p><strong>Por ejemplo:&nbsp; <\/strong><br>Si siguiente es la estructura del men\u00fa:<br><br>Acerca de<br>&gt; Acerca del equipo<br>&gt;&gt; Miembros del equipo<br>&gt;&gt;&gt; Responsabilidades del equipo<br>&gt;&gt;&gt;&gt; Contactos del equipo<br><br>A continuaci\u00f3n, a\u00f1ada un CSS <g class=\"gr_ gr_13 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace gr-progress\" id=\"13\" data-gr-id=\"13\">clase<\/g><strong>&nbsp;<g class=\"gr_ gr_14 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace\" id=\"14\" data-gr-id=\"14\">ast<\/g>-<g class=\"gr_ gr_12 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del\" id=\"12\" data-gr-id=\"12\">submen\u00fa<\/g> <\/strong>al men\u00fa principal -&nbsp;<strong>Acerca del equipo&nbsp;<\/strong>&nbsp;Para que sus submen\u00fas se abran a la izquierda en lugar de a la derecha.&nbsp;<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Pasos detallados para a\u00f1adir una clase CSS -&nbsp;<\/h4>\n\n\n\n<p><strong>Paso 1:<\/strong> En el cuadro de mandos, vaya a <strong>Apariencia &gt; Men\u00fas<\/strong>.<\/p>\n\n\n\n<p><strong>Segundo paso:<\/strong> En la esquina superior derecha, haga clic en <strong>Opciones de pantalla<\/strong> y activar el <strong>Clases de CSS<\/strong> opci\u00f3n.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1326\" height=\"234\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2019\/01\/wp-backend-locate-screen-options.jpg\" alt=\"Screen Options CSS Classes\" class=\"wp-image-50916\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2019\/01\/wp-backend-locate-screen-options.jpg 1326w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2019\/01\/wp-backend-locate-screen-options-300x53.jpg 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2019\/01\/wp-backend-locate-screen-options-1024x181.jpg 1024w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2019\/01\/wp-backend-locate-screen-options-768x136.jpg 768w\" sizes=\"(max-width: 1326px) 100vw, 1326px\" \/><\/figure>\n\n\n\n<p><strong>Paso 3:<\/strong> En la estructura de men\u00fas, haga clic en el men\u00fa cuyo submen\u00fa desee abrir a la izquierda.<\/p>\n\n\n\n<p><strong>Paso 4:<\/strong> A\u00f1adir clase CSS <strong>ast-left-align-sub-menu <\/strong>y haga clic en Guardar.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-submenu-direction.png\"><img decoding=\"async\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-submenu-direction.png\" alt=\"Astra Submenu Options\" class=\"wp-image-39861\"\/><\/a><\/figure>\n\n\n\n<p style=\"font-size:18px\">Ahora los submen\u00fas se abrir\u00e1n como -&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2019\/08\/Screen-Recording-2019-01-23-at-06.39.50.81-PM.gif\" alt=\"Astra Submenu Opening Left\"\/><\/figure>\n\n\n\n<p>Si sigue sin poder cambiar la direcci\u00f3n en la que se abren los submen\u00fas, p\u00f3ngase en contacto con nuestra <a href=\"https:\/\/git-staging.wpastra.com\/es\/support\/open-a-ticket\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/git-staging.wpastra.com\/support\/open-a-ticket\/\" rel=\"noreferrer noopener\">atenci\u00f3n al cliente<\/a> y estaremos encantados de echar un vistazo a su sitio web.<\/p>","protected":false},"excerpt":{"rendered":"<p>Por defecto, los submen\u00fas se abrir\u00e1n a la derecha. A veces, si la estructura del submen\u00fa es larga, puede abrirse fuera de la ventana gr\u00e1fica de la derecha y el usuario no podr\u00e1 verlo.  Para solucionarlo, a\u00f1ada la clase CSS mencionada a continuaci\u00f3n al men\u00fa principal cuyo submen\u00fa se [...]<\/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":[108],"docs_tag":[],"class_list":{"0":"post-30122","1":"docs","2":"type-docs","3":"status-publish","5":"docs_category-general"},"spectra_custom_meta":{"_yoast_wpseo_primary_docs_category":["108"],"_wp_old_slug":[""],"_wp_page_template":["default"],"wpil_sync_report3":["1"],"wpil_links_inbound_internal_count":["0"],"wpil_links_inbound_internal_count_data":["a:0:{}"],"wpil_links_outbound_internal_count":["1"],"wpil_links_outbound_internal_count_data":["a:1:{i:0;a:9:{s:3:\"url\";s:86:\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-submenu-direction.png\";s:8:\"url_real\";s:86:\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-submenu-direction.png\";s:4:\"host\";s:11:\"wpastra.com\";s:9:\"host_real\";s:11:\"wpastra.com\";s:8:\"internal\";b:1;s:7:\"post_id\";i:0;s:6:\"anchor\";s:129:\"<img src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2019\/08\/ast-2-submenu-direction.png\" alt=\"\" class=\"wp-image-39861\"\/>\";s:15:\"added_by_plugin\";b:0;s:10:\"post_title\";s:0:\"\";}}"],"wpil_links_outbound_external_count":["0"],"wpil_links_outbound_external_count_data":["a:0:{}"],"wpil_sync_report2_time":["2019-08-28T08:19:44+00:00"],"_edit_lock":["1687146917:86"],"_ppc_meta_key":["a:11:{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_key5\";s:15:\"Title is Catchy\";s:8:\"ppc_key3\";s:17:\"Category Selected\";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\";s:20:\"ppc_key5ddf5ba19a347\";s:9:\"TOC Added\";s:20:\"ppc_key5ddf5b93dc6a6\";s:21:\"Affiliate Links Added\";s:20:\"ppc_key5ddf5c326920c\";s:59:\"Headings are in title-case and have appropriate heading tag\";}"],"_edit_last":["86"],"onesignal_meta_box_present":["1"],"onesignal_send_notification":[""],"tap_disable_autolinker":["no"],"tap_autolink_inside_heading":["global"],"tap_autolink_random_placement":["global"],"tap_post_autolinker_limit":["0"],"site-sidebar-layout":["default"],"site-content-layout":["default"],"theme-transparent-header-meta":["default"],"_yoast_wpseo_title":["How to Open a Submenu Towards the Left Using Astra?"],"_yoast_wpseo_content_score":["60"],"_ht_kb_post_views_count":["8"],"_ht_kb_usefulness":["0"],"_ht_article_order_108":["30122"],"wp_last_modified_info":["June 19, 2023 @ 9:23 AM"],"wplmi_shortcode":["[lmt-post-modified-info]"],"views":["6670"],"helpful":["37"],"unhelpful":["26"],"redirects":["12"],"rank_math_primary_docs_category":["108"],"rank_math_title":["How to Open a Submenu Towards the Left Using Astra?"],"rank_math_news_sitemap_robots":["index"],"rank_math_robots":["a:1:{i:0;s:5:\"index\";}"],"rank_math_analytic_object_id":["925"],"rank_math_seo_score":["19"],"rank_math_internal_links_processed":["1"],"rank_math_og_content_image":["a:2:{s:5:\"check\";s:32:\"da9c5191ade802d3dd5998565d32fef7\";s:6:\"images\";a:1:{i:0;i:40912;}}"],"_wplmi_last_modified":["2023-06-19 09:23:04"],"pfd_related_docs":[""],"_wpml_media_duplicate":["1"],"_trp_automatically_translated_slug_es_ES":["cambiar-la-direccion-de-apertura-de-los-submenus"],"_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:6:{i:0;s:14:\"core\/paragraph\";i:1;s:10:\"core\/image\";i:2;s:9:\"core\/code\";i:3;s:12:\"core\/heading\";i:4;s:14:\"uagb\/container\";i:5;s:14:\"core\/shortcode\";}s:8:\"uag_flag\";b:1;s:11:\"uag_version\";s:10:\"1777418095\";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":"By default, the submenus will open to the right side. Sometimes if the submenu structure is long, it might open out of the viewport on the right and the user will not be able to see it.\u00a0 To fix this add the below-mentioned CSS class to the parent menu whose submenu\u00a0is displaying out of the&hellip;","_links":{"self":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/30122"}],"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=30122"}],"version-history":[{"count":0,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/30122\/revisions"}],"wp:attachment":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/media?parent=30122"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_category?post=30122"},{"taxonomy":"docs_tag","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_tag?post=30122"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}