{"id":23510,"date":"2017-11-28T00:00:00","date_gmt":"2017-11-27T18:30:00","guid":{"rendered":"https:\/\/git-staging.wpastra.com\/?post_type=docs&#038;p=23510"},"modified":"2022-02-24T00:09:05","modified_gmt":"2022-02-23T18:39:05","slug":"highlight-certain-menu-item","status":"publish","type":"docs","link":"https:\/\/git-staging.wpastra.com\/es\/docs\/highlight-certain-menu-item\/","title":{"rendered":"\u00bfC\u00f3mo resaltar un determinado elemento del men\u00fa?"},"content":{"rendered":"<p>A veces es necesario resaltar un elemento del men\u00fa en particular. Puede resaltar un men\u00fa a\u00f1adiendo un color de fondo diferente, color de texto, etc al elemento de men\u00fa en particular utilizando CSS personalizado. Para aplicar CSS personalizado es necesario a\u00f1adir una clase CSS para el men\u00fa. A continuaci\u00f3n se muestran los pasos para a\u00f1adir una clase CSS al men\u00fa y resaltarlo utilizando un CSS personalizado.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/11\/menu-highlight-css.png\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1655\" height=\"841\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/11\/menu-highlight-css.png\" alt=\"Menu Highlight CSS\" class=\"wp-image-28844\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/11\/menu-highlight-css.png 1655w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/11\/menu-highlight-css-300x152.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/11\/menu-highlight-css-768x390.png 768w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/11\/menu-highlight-css-1024x520.png 1024w\" sizes=\"(max-width: 1655px) 100vw, 1655px\" \/><\/a><\/figure><\/div>\n\n\n\n<p><strong>Primer paso<\/strong> - Desde el panel de control de WordPress, vaya a<strong> Apariencia &gt; Men\u00fas<\/strong>.<br><strong>Paso 2<\/strong> - Haga clic en <strong>Opciones de pantalla <\/strong>y marque la casilla <strong>Clases de CSS<\/strong> casilla de verificaci\u00f3n.<br><strong>Paso 3<\/strong> - Haga clic en el elemento del men\u00fa que desee resaltar.<br><strong>Paso 4 - <\/strong>A\u00f1ade la clase CSS al elemento del men\u00fa y guarda los cambios en el men\u00fa.&nbsp;<\/p>\n\n\n\n<p>Una vez a\u00f1adida la clase CSS, puede a\u00f1adir CSS con respecto a esta clase. Aseg\u00farese de a\u00f1adir un punto (.) antes de la clase CSS mientras escribe el c\u00f3digo CSS. A continuaci\u00f3n se muestra un ejemplo de c\u00f3digo CSS que puede probar. Tenga en cuenta que la clase CSS utilizada es&nbsp;<strong><em>men\u00fa-destacado<\/em><\/strong><\/p>\n\n\n\n<p>A continuaci\u00f3n CSS crear\u00e1 un <strong>bot\u00f3n simple<\/strong> del men\u00fa:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">.menu-highlight\n{\n fondo: #d3d3d3;\n border-radius: 35px\n acolchado: 0px 20px;\n altura de l\u00ednea: 50px !importante;\n margin: auto;\n}<\/pre>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/11\/menu-highlight-css-output1.png\"><img decoding=\"async\" width=\"1655\" height=\"841\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/11\/menu-highlight-css-output1.png\" alt=\"Menu Highlight CSS Output 1\" class=\"wp-image-28845\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/11\/menu-highlight-css-output1.png 1655w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/11\/menu-highlight-css-output1-300x152.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/11\/menu-highlight-css-output1-768x390.png 768w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/11\/menu-highlight-css-output1-1024x520.png 1024w\" sizes=\"(max-width: 1655px) 100vw, 1655px\" \/><\/a><\/figure><\/div>\n\n\n\n<p>Para el CSS anterior, el men\u00fa resaltado tendr\u00e1 el aspecto que se muestra en la siguiente captura de pantalla -<br><strong>A continuaci\u00f3n CSS a\u00f1adir\u00e1 el bot\u00f3n contorneado al elemento de men\u00fa:&nbsp;<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted lang:default decode:true\">.menu-highlight a{\ncolor: #ffffff !importante;\nfondo: transparente;\nborder-color: #1172c4;\nestilo de borde: s\u00f3lido;\nancho del borde: 2px;\nborder-radius: 50px;\nrelleno: 0px 10px !important;\ntransition: all 0.2s linear;\naltura de l\u00ednea:45px;\n}\n.menu-highlight a{\ncolor:#1172c4 !important;\n}\n.menu-highlight a:hover {\ncolor: #ffffff !important;\nfondo: #1172c4;\nborder-color: #1172c4;\n}\nli.menu-highlight:hover a{\ncolor:#ffffff !important;\n}\n.menu-highlight:active {\nborder-radius: 22px;\n}<\/pre>\n\n\n\n<p>Para el CSS anterior, el men\u00fa resaltado tendr\u00e1 el aspecto que se muestra en la siguiente captura de pantalla -<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><a href=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/11\/menu-highlight-css-output2.png\"><img decoding=\"async\" width=\"1655\" height=\"841\" src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/11\/menu-highlight-css-output2.png\" alt=\"Menu Highlight CSS Output 2\" class=\"wp-image-28846\" srcset=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/11\/menu-highlight-css-output2.png 1655w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/11\/menu-highlight-css-output2-300x152.png 300w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/11\/menu-highlight-css-output2-768x390.png 768w, https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/11\/menu-highlight-css-output2-1024x520.png 1024w\" sizes=\"(max-width: 1655px) 100vw, 1655px\" \/><\/a><\/figure><\/div>\n\n\n\n<p><strong>Notas adicionales:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Este CSS se puede pegar en el Personalizador \u25b8 CSS adicional <a href=\"https:\/\/git-staging.wpastra.com\/es\/docs\/adding-custom-css-code\/\">como se explica aqu\u00ed<\/a>.<\/li><li>Puede modificar el c\u00f3digo CSS para cambiar los colores y el aspecto del elemento de men\u00fa resaltado.<\/li><\/ul>","protected":false},"excerpt":{"rendered":"<p>A veces es necesario resaltar un elemento del men\u00fa en particular. Puede resaltar un men\u00fa a\u00f1adiendo un color de fondo diferente, color de texto, etc al elemento de men\u00fa en particular utilizando CSS personalizado. Para aplicar CSS personalizado es necesario a\u00f1adir una clase CSS para el men\u00fa. A continuaci\u00f3n se muestran los pasos para a\u00f1adir una clase CSS a [...]<\/p>","protected":false},"author":4,"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":[2113],"docs_tag":[],"class_list":{"0":"post-23510","1":"docs","2":"type-docs","3":"status-publish","5":"docs_category-custom-css"},"spectra_custom_meta":{"_wp_old_slug":["23510|23510","23510|23510"],"_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":["4"],"wpil_links_outbound_internal_count_data":["a:4:{i:0;a:9:{s:3:\"url\";s:81:\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/11\/menu-highlight-css.png\";s:8:\"url_real\";s:81:\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/11\/menu-highlight-css.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:124:\"<img src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/11\/menu-highlight-css.png\" alt=\"\" class=\"wp-image-28844\"\/>\";s:15:\"added_by_plugin\";b:0;s:10:\"post_title\";s:0:\"\";}i:1;a:9:{s:3:\"url\";s:89:\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/11\/menu-highlight-css-output1.png\";s:8:\"url_real\";s:89:\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/11\/menu-highlight-css-output1.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:132:\"<img src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/11\/menu-highlight-css-output1.png\" alt=\"\" class=\"wp-image-28845\"\/>\";s:15:\"added_by_plugin\";b:0;s:10:\"post_title\";s:0:\"\";}i:2;a:9:{s:3:\"url\";s:89:\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/11\/menu-highlight-css-output2.png\";s:8:\"url_real\";s:89:\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/11\/menu-highlight-css-output2.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:132:\"<img src=\"https:\/\/git-staging.wpastra.com\/wp-content\/uploads\/2017\/11\/menu-highlight-css-output2.png\" alt=\"\" class=\"wp-image-28846\"\/>\";s:15:\"added_by_plugin\";b:0;s:10:\"post_title\";s:0:\"\";}i:3;a:9:{s:3:\"url\";s:60:\"https:\/\/git-staging.wpastra.com\/docs\/adding-custom-css-code\/\";s:8:\"url_real\";s:60:\"https:\/\/git-staging.wpastra.com\/docs\/adding-custom-css-code\/\";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:17:\"as explained here\";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:20:00+00:00"],"astra_style_timestamp_css":["1573724608"],"_ht_kb_post_views_count":["17"],"_ht_kb_usefulness":["0"],"_ht_article_order_103":["23510"],"wp_last_modified_info":["February 24, 2022 @ 12:09 AM"],"wplmi_shortcode":["[lmt-post-modified-info]"],"_edit_lock":["1645641545:77"],"_edit_last":["77"],"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_content_score":["30"],"_yoast_wpseo_estimated-reading-time-minutes":["2"],"views":["10632"],"helpful":["24"],"unhelpful":["14"],"redirects":["5"],"_lmt_disableupdate":["no"],"_wplmi_last_modified":["2021-09-08 20:13:59"],"rank_math_news_sitemap_robots":["index"],"rank_math_robots":["a:1:{i:0;s:5:\"index\";}"],"rank_math_analytic_object_id":["1308"],"rank_math_seo_score":["20"],"rank_math_internal_links_processed":["1"],"pfd_related_docs":[""],"rank_math_og_content_image":["a:2:{s:5:\"check\";s:32:\"0eb10a37ba713e65df3f311d0e53e32f\";s:6:\"images\";a:1:{i:0;i:28844;}}"],"_wpml_media_duplicate":["1"],"_trp_automatically_translated_slug_es_ES":["resaltar-un-determinado-elemento-del-menu"],"_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:17:\"core\/preformatted\";i:3;s:9:\"core\/list\";i:4;s:14:\"uagb\/container\";i:5;s:14:\"core\/shortcode\";}s:8:\"uag_flag\";b:1;s:11:\"uag_version\";s:10:\"1777217612\";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":"Sujay Pawar","author_link":"https:\/\/git-staging.wpastra.com\/es\/author\/sujay\/"},"uagb_comment_info":0,"uagb_excerpt":"Sometimes there&nbsp;is a need to highlight a particular menu item. You can highlight a menu by adding a different background color, text color etc to the particular menu item using custom CSS. To apply custom CSS you need to add CSS class for the menu. Below are the steps to add a CSS class to&hellip;","_links":{"self":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/23510"}],"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\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/comments?post=23510"}],"version-history":[{"count":0,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs\/23510\/revisions"}],"wp:attachment":[{"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/media?parent=23510"}],"wp:term":[{"taxonomy":"docs_category","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_category?post=23510"},{"taxonomy":"docs_tag","embeddable":true,"href":"https:\/\/git-staging.wpastra.com\/es\/wp-json\/wp\/v2\/docs_tag?post=23510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}