{"id":32898,"date":"2020-06-17T14:53:53","date_gmt":"2020-06-17T12:53:53","guid":{"rendered":"https:\/\/divimundo.com\/blog\/seis-consejos-para-un-mejor-menu-movil-divi-plantilla-de-encabezado-gratis-descargar\/"},"modified":"2021-11-10T08:34:56","modified_gmt":"2021-11-10T07:34:56","slug":"seis-consejos-para-un-mejor-menu-para-movil-en-divi","status":"publish","type":"post","link":"https:\/\/divimundo.com\/es\/blog\/seis-consejos-para-un-mejor-menu-para-movil-en-divi\/","title":{"rendered":"Seis consejos para un mejor men\u00fa para m\u00f3vil en Divi + plantilla de encabezado de descarga gratuita"},"content":{"rendered":"<p>[et_pb_section fb_built=\u00bb1&#8243; custom_padding_last_edited=\u00bbon|phone\u00bb _builder_version=\u00bb4.4.7&#8243; custom_padding=\u00bb||||false|false\u00bb custom_padding_tablet=\u00bb\u00bb custom_padding_phone=\u00bb30px||||false|false\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_row _builder_version=\u00bb4.4.7&#8243; custom_padding=\u00bb||||false|false\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.4.4&#8243; global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.4.7&#8243; global_colors_info=\u00bb{}\u00bb]<\/p>\n<p><strong>La actualizaci\u00f3n de Divi 4 con el Generador de temas ha abierto nuevas posibilidades de dise\u00f1o del men\u00fa para m\u00f3vil en Divi, pero con algunos trucos CSS simples puedes hacer que el men\u00fa hamburguesa sea a\u00fan mejor. Tambi\u00e9n proporcionamos una plantilla de encabezado gratuita que puedes cargar en Divi Generador de temas. Probado con Divi 4.4.7.<\/strong><\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=\u00bb1_2,1_2&#8243; _builder_version=\u00bb4.4.4&#8243; global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb1_2&#8243; _builder_version=\u00bb4.4.4&#8243; global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.4.5&#8243; text_orientation=\u00bbcenter\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<h4>Antes (men\u00fa predeterminado de Divi)<\/h4>\n<p>[\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/divimundo.com\/wp-content\/uploads\/2020\/05\/divi-mobile-menu-before.png\u00bb alt=\u00bbAntes (men\u00fa predeterminado de Divi)\u00bb title_text=\u00bbAntes (men\u00fa predeterminado de Divi)\u00bb align=\u00bbcenter\u00bb _builder_version=\u00bb4.4.5&#8243; border_radii=\u00bbon|10px|10px|10px|10px\u00bb border_width_all=\u00bb10px\u00bb border_color_all=\u00bb#0a0a0a\u00bb box_shadow_style=\u00bbpreset1&#8243; global_colors_info=\u00bb{}\u00bb][\/et_pb_image][\/et_pb_column][et_pb_column type=\u00bb1_2&#8243; _builder_version=\u00bb4.4.4&#8243; global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.4.5&#8243; text_orientation=\u00bbcenter\u00bb custom_margin_tablet=\u00bb29px||||false|false\u00bb custom_margin_phone=\u00bb29px||||false|false\u00bb custom_margin_last_edited=\u00bbon|phone\u00bb locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<h4>Despu\u00e9s (con los seis fragmentos CSS)<\/h4>\n<p>[\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/divimundo.com\/wp-content\/uploads\/2020\/05\/mobil-meny-efter1.gif\u00bb alt=\u00bbDespu\u00e9s (con los seis fragmentos CSS)\u00bb title_text=\u00bbDespu\u00e9s (con los seis fragmentos CSS)\u00bb align=\u00bbcenter\u00bb _builder_version=\u00bb4.4.5&#8243; border_radii=\u00bbon|10px|10px|10px|10px\u00bb border_width_all=\u00bb10px\u00bb border_color_all=\u00bb#0a0a0a\u00bb box_shadow_style=\u00bbpreset1&#8243; locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=\u00bb1&#8243; _builder_version=\u00bb4.4.4&#8243; custom_padding=\u00bb0px|||||\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_row column_structure=\u00bb1_2,1_2&#8243; _builder_version=\u00bb4.4.4&#8243; global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb1_2&#8243; _builder_version=\u00bb4.4.4&#8243; global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.4.5&#8243; header_3_font_size=\u00bb28px\u00bb locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<h3>Empezar<\/h3>\n<p>[\/et_pb_text][et_pb_blurb title=\u00bb1. Agregar texto a la izquierda del men\u00fa hamburguesa\u00bb use_icon=\u00bbon\u00bb font_icon=\u00bb%%198%%\u00bb icon_placement=\u00bbleft\u00bb use_icon_font_size=\u00bbon\u00bb icon_font_size=\u00bb27px\u00bb _builder_version=\u00bb4.4.7&#8243; header_font_size=\u00bb16px\u00bb header_line_height=\u00bb1.6em\u00bb custom_margin=\u00bb||10px||false|false\u00bb link_option_url=\u00bb#1-add-text-left-of-hamburger-menu\u00bb header_font_size_phone=\u00bb16px\u00bb custom_css_blurb_title=\u00bbmargin-top:7px;\u00bb locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb header_text_color__hover_enabled=\u00bbon|desktop\u00bb header_text_color__hover=\u00bb#383838&#8243; icon_color__hover_enabled=\u00bboff|desktop\u00bb font_icon__hover_enabled=\u00bbon|hover\u00bb font_icon__hover=\u00bb%%196%%\u00bb][\/et_pb_blurb][et_pb_blurb title=\u00bb2. Cambiar el icono de colapso a una X en el men\u00fa hamburguesa\u00bb use_icon=\u00bbon\u00bb font_icon=\u00bb%%198%%\u00bb icon_placement=\u00bbleft\u00bb use_icon_font_size=\u00bbon\u00bb icon_font_size=\u00bb27px\u00bb _builder_version=\u00bb4.4.7&#8243; header_font_size=\u00bb16px\u00bb header_line_height=\u00bb1.6em\u00bb custom_margin=\u00bb||10px||false|false\u00bb link_option_url=\u00bb#2-change-collapse-icon-to-X\u00bb header_font_size_phone=\u00bb16px\u00bb custom_css_blurb_title=\u00bbmargin-top:7px;\u00bb locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb icon_color__hover_enabled=\u00bboff|desktop\u00bb header_text_color__hover=\u00bb#383838&#8243; header_text_color__hover_enabled=\u00bbon|desktop\u00bb font_icon__hover=\u00bb%%196%%\u00bb font_icon__hover_enabled=\u00bbon|hover\u00bb][\/et_pb_blurb][et_pb_blurb title=\u00bb3. Eliminar la l\u00ednea superior del men\u00fa para m\u00f3vil\u00bb use_icon=\u00bbon\u00bb font_icon=\u00bb%%198%%\u00bb icon_placement=\u00bbleft\u00bb use_icon_font_size=\u00bbon\u00bb icon_font_size=\u00bb27px\u00bb _builder_version=\u00bb4.4.7&#8243; header_font_size=\u00bb16px\u00bb header_line_height=\u00bb1.6em\u00bb custom_margin=\u00bb||10px||false|false\u00bb link_option_url=\u00bb#3-remove-the-top-border-line\u00bb header_font_size_phone=\u00bb16px\u00bb custom_css_blurb_title=\u00bbmargin-top:7px;\u00bb locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb icon_color__hover_enabled=\u00bboff|desktop\u00bb header_text_color__hover=\u00bb#383838&#8243; header_text_color__hover_enabled=\u00bbon|desktop\u00bb font_icon__hover=\u00bb%%196%%\u00bb font_icon__hover_enabled=\u00bbon|hover\u00bb][\/et_pb_blurb][et_pb_blurb title=\u00bb4. Centrar el texto del men\u00fa para m\u00f3vil\u00bb use_icon=\u00bbon\u00bb font_icon=\u00bb%%198%%\u00bb icon_placement=\u00bbleft\u00bb use_icon_font_size=\u00bbon\u00bb icon_font_size=\u00bb27px\u00bb _builder_version=\u00bb4.4.7&#8243; header_font_size=\u00bb16px\u00bb header_line_height=\u00bb1.6em\u00bb custom_margin=\u00bb||10px||false|false\u00bb link_option_url=\u00bb#4-center-align-mobile-menu-items\u00bb header_font_size_phone=\u00bb16px\u00bb custom_css_blurb_title=\u00bbmargin-top:7px;\u00bb locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb icon_color__hover_enabled=\u00bboff|desktop\u00bb header_text_color__hover=\u00bb#383838&#8243; header_text_color__hover_enabled=\u00bbon|desktop\u00bb font_icon__hover=\u00bb%%196%%\u00bb font_icon__hover_enabled=\u00bbon|hover\u00bb][\/et_pb_blurb][et_pb_blurb title=\u00bb5. Hacer que el men\u00fa para m\u00f3vil tenga anchura completa\u00bb use_icon=\u00bbon\u00bb font_icon=\u00bb%%198%%\u00bb icon_placement=\u00bbleft\u00bb use_icon_font_size=\u00bbon\u00bb icon_font_size=\u00bb27px\u00bb _builder_version=\u00bb4.4.7&#8243; header_font_size=\u00bb16px\u00bb header_line_height=\u00bb1.6em\u00bb custom_margin=\u00bb||10px||false|false\u00bb link_option_url=\u00bb#5-make-the-mobile-menu-full-width\u00bb header_font_size_phone=\u00bb16px\u00bb custom_css_blurb_title=\u00bbmargin-top:7px;\u00bb locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb icon_color__hover_enabled=\u00bboff|desktop\u00bb header_text_color__hover=\u00bb#383838&#8243; header_text_color__hover_enabled=\u00bbon|desktop\u00bb font_icon__hover=\u00bb%%196%%\u00bb font_icon__hover_enabled=\u00bbon|hover\u00bb][\/et_pb_blurb][et_pb_blurb title=\u00bb6. Hacer que el men\u00fa para m\u00f3vil tenga altura completa\u00bb use_icon=\u00bbon\u00bb font_icon=\u00bb%%198%%\u00bb icon_placement=\u00bbleft\u00bb use_icon_font_size=\u00bbon\u00bb icon_font_size=\u00bb27px\u00bb _builder_version=\u00bb4.4.7&#8243; header_font_size=\u00bb16px\u00bb header_line_height=\u00bb1.6em\u00bb custom_margin=\u00bb||10px||false|false\u00bb link_option_url=\u00bb#6-make-the-mobile-menu-full-height\u00bb header_font_size_phone=\u00bb16px\u00bb custom_css_blurb_title=\u00bbmargin-top:7px;\u00bb locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb icon_color__hover_enabled=\u00bboff|desktop\u00bb header_text_color__hover=\u00bb#383838&#8243; header_text_color__hover_enabled=\u00bbon|desktop\u00bb font_icon__hover=\u00bb%%196%%\u00bb font_icon__hover_enabled=\u00bbon|hover\u00bb][\/et_pb_blurb][et_pb_blurb title=\u00bbTodos los fragmentos de CSS en un solo lugar\u00bb use_icon=\u00bbon\u00bb font_icon=\u00bb%%198%%\u00bb icon_placement=\u00bbleft\u00bb use_icon_font_size=\u00bbon\u00bb icon_font_size=\u00bb27px\u00bb _builder_version=\u00bb4.4.5&#8243; header_font_size=\u00bb16px\u00bb header_line_height=\u00bb1.6em\u00bb custom_margin=\u00bb||10px||false|false\u00bb link_option_url=\u00bb#all-css-snippets\u00bb header_font_size_phone=\u00bb16px\u00bb custom_css_blurb_title=\u00bbmargin-top:7px;\u00bb locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb icon_color__hover_enabled=\u00bboff|desktop\u00bb header_text_color__hover=\u00bb#383838&#8243; header_text_color__hover_enabled=\u00bbon|desktop\u00bb font_icon__hover=\u00bb%%196%%\u00bb font_icon__hover_enabled=\u00bbon|hover\u00bb][\/et_pb_blurb][\/et_pb_column][et_pb_column type=\u00bb1_2&#8243; _builder_version=\u00bb4.4.4&#8243; global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.4.7&#8243; custom_margin=\u00bb||0px||false|false\u00bb custom_margin_tablet=\u00bb30px||||false|false\u00bb custom_margin_phone=\u00bb\u00bb custom_margin_last_edited=\u00bbon|phone\u00bb locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<h2>BONUS: Descarga una plantilla de encabezado gratuita<\/h2>\n<p>[\/et_pb_text][et_pb_text _builder_version=\u00bb4.4.7&#8243; locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<p>Hemos creado un dise\u00f1o de encabezado que puedes importar en el Generador de temas (Divi Theme Builder). El dise\u00f1o contiene las seis mejoras del art\u00edculo + una barra superior con iconos de redes sociales y datos de contacto.<\/p>\n<p>[\/et_pb_text][et_pb_button button_url=\u00bb#header-layout\u00bb button_text=\u00bbLEER M\u00c1S \u25bc\u00bb button_alignment_tablet=\u00bb\u00bb button_alignment_phone=\u00bbcenter\u00bb button_alignment_last_edited=\u00bbon|phone\u00bb _builder_version=\u00bb4.4.6&#8243; button_icon=\u00bb%%34%%\u00bb button_icon_color=\u00bb#ffffff\u00bb button_on_hover=\u00bboff\u00bb background_layout=\u00bbdark\u00bb custom_padding=\u00bb||||false|false\u00bb locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_button][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=\u00bb1&#8243; module_id=\u00bbheader-layout\u00bb _builder_version=\u00bb4.4.5&#8243; custom_padding=\u00bb0px|||||\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_row _builder_version=\u00bb4.4.4&#8243; custom_padding=\u00bb0px||60px|||\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.4.4&#8243; global_colors_info=\u00bb{}\u00bb][et_pb_image src=\u00bbhttps:\/\/divimundo.com\/wp-content\/uploads\/2020\/05\/divi-menu-layout-download.png\u00bb alt=\u00bbA better mobile menu for Divi and WordPress\u00bb title_text=\u00bbA better mobile menu for Divi and WordPress\u00bb url=\u00bb@ET-DC@eyJkeW5hbWljIjp0cnVlLCJjb250ZW50IjoicG9zdF9saW5rX3VybF9wYWdlIiwic2V0dGluZ3MiOnsicG9zdF9pZCI6IjMyMzMyIn19@\u00bb url_new_window=\u00bbon\u00bb _builder_version=\u00bb4.4.5&#8243; _dynamic_attributes=\u00bburl\u00bb custom_margin=\u00bb||32px|||\u00bb animation_style=\u00bbzoom\u00bb animation_intensity_zoom=\u00bb7%\u00bb animation_starting_opacity=\u00bb100%\u00bb border_width_bottom=\u00bb2px\u00bb border_color_bottom=\u00bb#7c7c7c\u00bb global_colors_info=\u00bb{}\u00bb border_radii__hover_enabled=\u00bbon|desktop\u00bb][\/et_pb_image][et_pb_button button_url=\u00bbhttps:\/\/divimundo.com\/demo-a-better-divi-mobile-menu\/\u00bb url_new_window=\u00bbon\u00bb button_text=\u00bbDemo en vivo\u00bb button_alignment=\u00bbcenter\u00bb _builder_version=\u00bb4.4.6&#8243; background_layout=\u00bbdark\u00bb locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_button][\/et_pb_column][\/et_pb_row][et_pb_row custom_padding_last_edited=\u00bbon|phone\u00bb _builder_version=\u00bb4.4.6&#8243; background_color=\u00bb#f7f8fa\u00bb custom_padding=\u00bb50px|60px|50px|60px|true|true\u00bb custom_padding_tablet=\u00bb50px|40px|50px|40px|true|true\u00bb custom_padding_phone=\u00bb|20px||20px|true|true\u00bb border_radii=\u00bbon|5px|5px|5px|5px\u00bb box_shadow_style=\u00bbpreset1&#8243; box_shadow_color=\u00bbrgba(0,0,0,0.1)\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.4.4&#8243; global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.4.7&#8243; custom_margin=\u00bb||2px|||\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<h3>Descargar plantilla de encabezado<\/h3>\n<p>[\/et_pb_text][et_pb_text _builder_version=\u00bb4.4.7&#8243; text_font_size=\u00bb15px\u00bb custom_margin=\u00bb||-17px|||\u00bb text_line_height_last_edited=\u00bboff|desktop\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<ol>\n<li>Introduce tu correo electr\u00f3nico a continuaci\u00f3n para suscribirte a nuestro bolet\u00edn de noticias. (Si ya est\u00e1s suscrito no recibir\u00e1s boletines informativos duplicados.)<\/li>\n<li>Descarga el archivo zip que contiene la plantilla de encabezado.<\/li>\n<li>Extrae el archivo zip en tu disco duro.<\/li>\n<li>Importa el archivo\u00a0<em>divimundo-menu-template.json<\/em>en el \u00e1rea\u00a0de encabezado en <strong>Divi &gt;<\/strong>\u00a0<strong>Generador de temas<\/strong>.<\/li>\n<li>Ajusta el encabezado y util\u00edzalo libremente. El c\u00f3digo CSS est\u00e1 en un m\u00f3dulo de c\u00f3digo en el dise\u00f1o\/ layout. La manera m\u00e1s f\u00e1cil de encontrarlo es utilizando el modo Wireframe.<\/li>\n<\/ol>\n<p>[\/et_pb_text][et_pb_code _builder_version=\u00bb4.4.6&#8243; custom_margin=\u00bb||6px||false|false\u00bb global_colors_info=\u00bb{}\u00bb]<div class=\"et_bloom_locked_container et_bloom_optin_6\" data-page_id=\"32898\" data-optin_id=\"optin_6\" data-list_id=\"mailchimp_820f3e7639\" data-current_optin_id=\"optin_6\">\n\t\t\t\t\t<div class=\"et_bloom_locked_content\" style=\"display: none;\">\n\t\t\t\t\t\t<pee style=\"text-align:center;font-size:16px;margin-top:1.5em\"><b>\u00a1Ya casi llegamos!<\/b> S\u00f3lo tiene que descargar el archivo zip a continuaci\u00f3n y extraer el contenido. Importe el archivo json en el encabezado el Generador de temas (Divi Theme Builder). <a href=\"https:\/\/www.elegantthemes.com\/blog\/divi-resources\/how-to-use-divis-theme-builder-portability-import-export-features\" target=\"_blank\" rel=\"noopener noreferrer\">Leer m\u00e1s sobre la importaci\u00f3n de archivos de .json<\/a><\/pee><!-- [et_pb_line_break_holder] --><!-- [et_pb_line_break_holder] --><pee style=\"text-align:center;font-size:18px;margin-bottom:1.5em\"><b><a href=\"https:\/\/divimundo.com\/wp-content\/uploads\/layouts\/divimundo-menu-template.zip\">\u00bb Descargar la plantilla<\/a><\/b><\/pee> \n\t\t\t\t\t<\/div>\n\t\t\t\t\t<div class=\"et_bloom_locked_form\">\n\t\t\t\t\t\t<div class=\"et_bloom_inline_form et_bloom_optin et_bloom_make_form_visible et_bloom_optin_6\" style=\"display: none;\">\n\t\t\t\t<style type=\"text\/css\">.et_bloom .et_bloom_optin_6 .et_bloom_form_content { background-color: #3b67b3 !important; } .et_bloom .et_bloom_optin_6 .et_bloom_form_container .et_bloom_form_header { background-color: #f7f8fa !important; } .et_bloom .et_bloom_optin_6 .et_bloom_form_content button { background-color: #3cbcd4 !important; } .et_bloom .et_bloom_optin_6 .et_bloom_form_content .et_bloom_fields i { color: #3cbcd4 !important; } .et_bloom .et_bloom_optin_6 .et_bloom_form_content .et_bloom_custom_field_radio i:before { background: #3cbcd4 !important; } .et_bloom .et_bloom_optin_6 .et_bloom_form_content button { background-color: #3cbcd4 !important; } .et_bloom .et_bloom_optin_6 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_6 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_6 .et_bloom_form_container h2 strong { font-family: \"Open Sans\", Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_6 .et_bloom_form_container p, .et_bloom .et_bloom_optin_6 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_6 .et_bloom_form_container p strong, .et_bloom .et_bloom_optin_6 .et_bloom_form_container form input, .et_bloom .et_bloom_optin_6 .et_bloom_form_container form button span { font-family: \"Open Sans\", Helvetica, Arial, Lucida, sans-serif; } <\/style>\n\t\t\t\t<div class=\"et_bloom_form_container  et_bloom_rounded_corners et_bloom_rounded et_bloom_form_text_dark et_bloom_form_bottom et_bloom_inline_1_field\">\n\t\t\t\t\t\n\t\t\t<div class=\"et_bloom_form_container_wrapper clearfix\">\n\t\t\t\t<div class=\"et_bloom_header_outer\">\n\t\t\t\t\t<div class=\"et_bloom_form_header et_bloom_header_text_dark\">\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"et_bloom_form_content et_bloom_1_field et_bloom_bottom_inline\">\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t<form method=\"post\" class=\"clearfix\">\n\t\t\t\t\t\t<div class=\"et_bloom_fields\">\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<p class=\"et_bloom_popup_input et_bloom_subscribe_email\">\n\t\t\t\t\t\t\t\t<input placeholder=\"Tu correo electr\u00f3nico\">\n\t\t\t\t\t\t\t<\/p>\n\t\t\t\t\t\t\t\n\t\t\t\t\t\t\t<button data-optin_id=\"optin_6\" data-service=\"mailchimp\" data-list_id=\"820f3e7639\" data-page_id=\"32898\" data-account=\"diviguiden\" data-ip_address=\"false\" class=\"et_bloom_submit_subscription et_bloom_submit_subscription_locked\">\n\t\t\t\t\t\t\t\t<span class=\"et_bloom_subscribe_loader\"><\/span>\n\t\t\t\t\t\t\t\t<span class=\"et_bloom_button_text et_bloom_button_text_color_light\">DESCARGAR<\/span>\n\t\t\t\t\t\t\t<\/button>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/form>\n\t\t\t\t\t<div class=\"et_bloom_success_container\">\n\t\t\t\t\t\t<span class=\"et_bloom_success_checkmark\"><\/span>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t<h2 class=\"et_bloom_success_message\">\u00a1\u00c9xito!<\/h2>\n\t\t\t\t\t\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t<span class=\"et_bloom_close_button\"><\/span>\n\t\t\t\t<\/div>\n\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>[\/et_pb_code][et_pb_text _builder_version=\u00bb4.4.7&#8243; text_font_size=\u00bb13px\u00bb text_orientation=\u00bbcenter\u00bb text_font_size_phone=\u00bb10px\u00bb text_line_height_phone=\u00bb1.4em\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<p>El bolet\u00edn se env\u00eda aproximadamente cada dos meses y contiene consejos, gu\u00edas y ofertas. Puedes darte de baja en cualquier momento. Nunca venderemos ni compartiremos tu correo electr\u00f3nico. Tu direcci\u00f3n de correo electr\u00f3nico se almacena en Mailchimp.<\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=\u00bb1&#8243; module_id=\u00bb1-add-text-left-of-hamburger-menu\u00bb _builder_version=\u00bb4.4.5&#8243; global_colors_info=\u00bb{}\u00bb][et_pb_row _builder_version=\u00bb4.4.4&#8243; custom_padding=\u00bb0px||0px|||\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.4.4&#8243; global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.4.7&#8243; global_colors_info=\u00bb{}\u00bb]<\/p>\n<h2>1. Agregar texto a la izquierda del men\u00fa hamburguesa<\/h2>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=\u00bb2_3,1_3&#8243; _builder_version=\u00bb4.4.4&#8243; custom_padding=\u00bb0px|||||\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb2_3&#8243; _builder_version=\u00bb4.4.4&#8243; global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.4.7&#8243; global_colors_info=\u00bb{}\u00bb]<\/p>\n<p>Aunque las tres barras que conforman el llamado men\u00fa de hamburguesas han existido durante mucho tiempo, puede ser apropiado aclarar que el \u00edcono contiene\u00a0<strong>un men\u00fa<\/strong>\u00a0que se puede expandir.<\/p>\n<p><em>Ten en cuenta que el icono de men\u00fa hamburguesa debe estar alineado a la derecha para que el texto aparezca correctamente.<\/em><\/p>\n<p>&nbsp;<\/p>\n<h3>Paso a paso<\/h3>\n<ol>\n<li>Inicia sesi\u00f3n en WordPress y ve a <strong>Divi<\/strong> &gt; <strong>Personalizador de temas<\/strong> &gt; <strong>CSS adicional<\/strong><\/li>\n<li>Pega el siguiente c\u00f3digo CSS:<\/li>\n<\/ol>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">\/* Agregar texto a la izquierda del men\u00fa hamburguesa en  Generador de temas *\/\n\n.et_mobile_nav_menu:before  {\ncontent: 'MEN\u00da';\nposition: absolute;\nright: 40px;\n}\n\n\/* Agregar texto a la izquierda del men\u00fa hamburguesa en Divi 3 *\/\n\n#et_mobile_nav_menu:before  {\ncontent: 'MEN\u00da';\nposition: absolute;\nright: 33px;\nbottom:30px;\n}\n<\/pre>\n<p>3. Puedes cambiar el texto <strong>MEN\u00da<\/strong> a lo que desees, pero mejor si es breve.<\/p>\n<p>4. Guarda los cambios.<\/p>\n<p>[\/et_pb_text][\/et_pb_column][et_pb_column type=\u00bb1_3&#8243; _builder_version=\u00bb4.4.4&#8243; global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.4.5&#8243; text_orientation=\u00bbcenter\u00bb locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<h3>El resultado:<\/h3>\n<p>[\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/divimundo.com\/wp-content\/uploads\/2020\/05\/divi-mobilmeny1.png\u00bb align=\u00bbcenter\u00bb align_last_edited=\u00bboff|desktop\u00bb _builder_version=\u00bb4.4.5&#8243; custom_margin=\u00bb||12px||false|false\u00bb border_radii=\u00bbon|10px|10px|10px|10px\u00bb border_width_all=\u00bb10px\u00bb border_color_all=\u00bb#0a0a0a\u00bb box_shadow_style=\u00bbpreset1&#8243; locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_image][et_pb_text _builder_version=\u00bb4.4.7&#8243; text_font=\u00bb||on||||||\u00bb text_font_size=\u00bb15px\u00bb text_orientation=\u00bbcenter\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<p><em>Si utilizas el encabezado de Divi 3 puede que la palabra MEN\u00d9 (o la palabra que hayas eligido) tape el icono de b\u00fasqueda. Para evitar la superposici\u00f3n de contenido, simplemente oculta el icono de b\u00fasqueda en\u00a0<strong>Divi<\/strong>\u00a0&gt;\u00a0<strong>Personalizador de temas<\/strong>\u00a0&gt;\u00a0<strong>Cabecera y navegaci\u00f3n.<\/strong><\/em><\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=\u00bb1&#8243; module_id=\u00bb2-change-collapse-icon-to-X\u00bb _builder_version=\u00bb4.4.5&#8243; custom_padding=\u00bb0px|||||\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_row _builder_version=\u00bb4.4.4&#8243; custom_padding=\u00bb||0px|||\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.4.4&#8243; global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.4.7&#8243; global_colors_info=\u00bb{}\u00bb]<\/p>\n<h2>2. Cambiar el icono de colapso a una X en el men\u00fa hamburguesa<\/h2>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=\u00bb2_3,1_3&#8243; _builder_version=\u00bb4.4.4&#8243; custom_padding=\u00bb0px|||||\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb2_3&#8243; _builder_version=\u00bb4.4.4&#8243; global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.4.7&#8243; global_colors_info=\u00bb{}\u00bb]El hecho de que el icono de hamburguesa, con sus tres l\u00edneas, se convierta en una X cuando se expande el men\u00fa para m\u00f3vil es est\u00e1ndar en la mayor\u00eda de los temas y aplicaciones de WordPress pero \u00a0curiosamente no en Divi. Afortunadamente, solo se requieren un par de l\u00edneas de CSS para arreglar esto y mejorar la experiencia del usuario (UX) para los visitantes de tu sitio web.<\/p>\n<h3>Paso a paso<\/h3>\n<ol>\n<li>Inicia sesi\u00f3n en WordPress y ve a <strong>Divi<\/strong> &gt; <strong>Personalizador de temas<\/strong> &gt; <strong>CSS adicional<\/strong><\/li>\n<li>Pega el siguiente c\u00f3digo CSS:<\/li>\n<\/ol>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">\/* Cambiar el icono de colapso a una X en el men\u00fa hamburguesa *\/\n\n.mobile_nav.opened .mobile_menu_bar:before {\ncontent: \"\\4d\";\n}\n<\/pre>\n<p>3. Solo tienes que agregar <em>color:#000 !important;<\/em> antes de la \u00faltima etiqueta } para cambiar el color del icono. Reemplaza <em>#000<\/em> (negro) con el color de tu elecci\u00f3n.<\/p>\n<p>4. Guarda los cambios.[\/et_pb_text][\/et_pb_column][et_pb_column type=\u00bb1_3&#8243; _builder_version=\u00bb4.4.4&#8243; global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.4.5&#8243; text_orientation=\u00bbcenter\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<h3>El resultado:<\/h3>\n<p>[\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/divimundo.com\/wp-content\/uploads\/2020\/05\/divi-mobilmeny2.png\u00bb align=\u00bbcenter\u00bb _builder_version=\u00bb4.4.4&#8243; custom_margin=\u00bb||12px||false|false\u00bb border_radii=\u00bbon|10px|10px|10px|10px\u00bb border_width_all=\u00bb10px\u00bb border_color_all=\u00bb#0a0a0a\u00bb box_shadow_style=\u00bbpreset1&#8243; locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=\u00bb1&#8243; module_id=\u00bb3-remove-the-top-border-line\u00bb _builder_version=\u00bb4.4.5&#8243; custom_padding=\u00bb0px|||||\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_row _builder_version=\u00bb4.4.4&#8243; custom_padding=\u00bb||0px|||\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.4.4&#8243; global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.4.7&#8243; global_colors_info=\u00bb{}\u00bb]<\/p>\n<h2>3. Eliminar la l\u00ednea superior del men\u00fa para m\u00f3vil<\/h2>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=\u00bb2_3,1_3&#8243; _builder_version=\u00bb4.4.4&#8243; custom_padding=\u00bb0px|||||\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb2_3&#8243; _builder_version=\u00bb4.4.4&#8243; global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.4.7&#8243; global_colors_info=\u00bb{}\u00bb]<\/p>\n<p>La l\u00ednea azul en la parte superior del men\u00fa para m\u00f3vil es una pista clara de que tu sitio web est\u00e1 hecho en Divi. Si no quieres que tu men\u00fa sea igual como todos los dem\u00e1s menus en Divi puedes eliminar esta l\u00ednea.<\/p>\n<h3><strong>\u00a0<\/strong><\/h3>\n<h3>Paso a paso con Divi 3<\/h3>\n<ol>\n<li>Inicia sesi\u00f3n en WordPress y ve a <strong>Divi<\/strong> &gt; <strong>Personalizador de temas<\/strong> &gt; <strong>CSS adicional<\/strong><\/li>\n<li>Pega el siguiente c\u00f3digo CSS:<\/li>\n<\/ol>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">\/* Eliminar la l\u00ednea superior del men\u00fa para m\u00f3vil *\/\n\n.et_mobile_menu {\nborder-top:0px;\n}\n<\/pre>\n<p>2. Guarda los cambios.<\/p>\n<h3>Paso a paso con Divi 4<\/h3>\n<p>El fragmento de CSS para Divi 3 funcionar\u00e1 perfecto tambi\u00e9n con Divi 4. Pero con Divi 4 tambi\u00e9n se puede eliminar la l\u00ednea superior del men\u00fa hamburguesa sin usar CSS. \u00a0<\/p>\n<ol>\n<li>Abre el Generador de temas<\/li>\n<li>Edita tu plantilla de encabezado<\/li>\n<li>Haz clic en la rueda dentada para ir a los ajustes<\/li>\n<li>Ve a la pesta\u00f1a <strong>Dise\u00f1o<\/strong> &gt; <strong>Enlaces al men\u00fa desplegable<\/strong>\u00a0y cambia\u00a0<strong>Color de l\u00ednea del men\u00fa desplegable<\/strong> a <em>rgba(0,0,0,0)<\/em><\/li>\n<li>Guarda los cambios<\/li>\n<\/ol>\n<p>Esto har\u00e1 que la l\u00ednea tenga opacidad cero, por lo tanto haci\u00e9ndola invisible.<\/p>\n<p>&nbsp;<\/p>\n<p>[\/et_pb_text][\/et_pb_column][et_pb_column type=\u00bb1_3&#8243; _builder_version=\u00bb4.4.4&#8243; global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.4.5&#8243; text_orientation=\u00bbcenter\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<h3>El resultado:<\/h3>\n<p>[\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/divimundo.com\/wp-content\/uploads\/2020\/05\/divi-mobilmeny3.png\u00bb align=\u00bbcenter\u00bb _builder_version=\u00bb4.4.5&#8243; custom_margin=\u00bb||12px||false|false\u00bb border_radii=\u00bbon|10px|10px|10px|10px\u00bb border_width_all=\u00bb10px\u00bb border_color_all=\u00bb#0a0a0a\u00bb box_shadow_style=\u00bbpreset1&#8243; locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_image][et_pb_text _builder_version=\u00bb4.4.5&#8243; text_font=\u00bb||on||||||\u00bb text_font_size=\u00bb15px\u00bb text_orientation=\u00bbcenter\u00bb locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<p>La l\u00ednea superior tiende a superponerse al men\u00fa m\u00f3vil cuando se utiliza el Generador de tema. Al esconder la l\u00ednea, no tienes que preocuparte por eso.<\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=\u00bb1&#8243; module_id=\u00bb4-center-align-mobile-menu-items\u00bb _builder_version=\u00bb4.4.5&#8243; custom_padding=\u00bb0px|||||\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_row _builder_version=\u00bb4.4.4&#8243; custom_padding=\u00bb||0px|||\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.4.4&#8243; global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.4.7&#8243; global_colors_info=\u00bb{}\u00bb]<\/p>\n<h2>4. Centrar el texto del men\u00fa para m\u00f3vil<\/h2>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=\u00bb2_3,1_3&#8243; _builder_version=\u00bb4.4.4&#8243; custom_padding=\u00bb0px|||||\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb2_3&#8243; _builder_version=\u00bb4.4.4&#8243; global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.4.7&#8243; global_colors_info=\u00bb{}\u00bb]<\/p>\n<p>Textos cortos tienden a funcionar mejor en moviles. Lo mismo es cierto para el men\u00fa para dispositivos m\u00f3viles. No es posible centrar el texto del menu para m\u00f3vil en el constructor Divi ni en el del Personalizador de temas. Pero con un par de l\u00edneas de CSS resolver\u00e1s el problema, tanto en Divi 3 como en Divi 4.<\/p>\n<h3>Paso a paso<\/h3>\n<ol>\n<li>Inicia sesi\u00f3n en WordPress y ve a <strong>Divi<\/strong> &gt; <strong>Personalizador de temas<\/strong> &gt; <strong>CSS adicional<\/strong><\/li>\n<li>Pega el siguiente c\u00f3digo CSS:<\/li>\n<\/ol>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">\/* Centrar el texto del men\u00fa para m\u00f3vil *\/\n\n.et_mobile_menu li {\ntext-align:center !important;\n}\n  \n.et_mobile_menu li li, .et_mobile_menu li ul {\npadding-left:0px !important;\n}\n<\/pre>\n<p>2. Guarda los cambios.<\/p>\n<p>&nbsp;<\/p>\n<p>[\/et_pb_text][\/et_pb_column][et_pb_column type=\u00bb1_3&#8243; _builder_version=\u00bb4.4.4&#8243; global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.4.5&#8243; text_orientation=\u00bbcenter\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<h3>El resultado:<\/h3>\n<p>[\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/divimundo.com\/wp-content\/uploads\/2020\/05\/divi-mobilmeny4.png\u00bb align=\u00bbcenter\u00bb _builder_version=\u00bb4.4.4&#8243; custom_margin=\u00bb||12px||false|false\u00bb border_radii=\u00bbon|10px|10px|10px|10px\u00bb border_width_all=\u00bb10px\u00bb border_color_all=\u00bb#0a0a0a\u00bb box_shadow_style=\u00bbpreset1&#8243; locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=\u00bb1&#8243; module_id=\u00bb5-make-the-mobile-menu-full-width\u00bb _builder_version=\u00bb4.4.5&#8243; custom_padding=\u00bb0px|||||\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_row _builder_version=\u00bb4.4.4&#8243; custom_padding=\u00bb||0px|||\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.4.4&#8243; global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.4.7&#8243; global_colors_info=\u00bb{}\u00bb]<\/p>\n<h2>5. Hacer que el men\u00fa para m\u00f3vil tenga anchura completa<\/h2>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=\u00bb2_3,1_3&#8243; _builder_version=\u00bb4.4.4&#8243; custom_padding=\u00bb0px|||||\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb2_3&#8243; _builder_version=\u00bb4.4.4&#8243; global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.4.7&#8243; global_colors_info=\u00bb{}\u00bb]<\/p>\n<p>Este es un ajuste que recomiendo que todos implement\u00e9is: deja que el men\u00fa para m\u00f3vil llene el 100% del ancho del dispositivo m\u00f3vil en lugar de colgar como una tira delgada.\u00a0<\/p>\n<h3>Paso a paso<\/h3>\n<ol>\n<li>Inicia sesi\u00f3n en WordPress y ve a <strong>Divi<\/strong> &gt; <strong>Personalizador de temas<\/strong> &gt; <strong>CSS adicional<\/strong><\/li>\n<li>Pega el siguiente c\u00f3digo CSS:<\/li>\n<\/ol>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">\/* Hacer que el men\u00fa para m\u00f3vil tenga anchura completa *\/\n\n.et_mobile_menu {\nmin-width: 100vw;\nmargin-left: -10vw;\n}\n<\/pre>\n<p>2. Guarda los cambios.<\/p>\n<p>[\/et_pb_text][\/et_pb_column][et_pb_column type=\u00bb1_3&#8243; _builder_version=\u00bb4.4.4&#8243; global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.4.5&#8243; text_orientation=\u00bbcenter\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<h3>El resultado:<\/h3>\n<p>[\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/divimundo.com\/wp-content\/uploads\/2020\/05\/divi-mobilmeny5.png\u00bb align=\u00bbcenter\u00bb _builder_version=\u00bb4.4.4&#8243; custom_margin=\u00bb||12px||false|false\u00bb border_radii=\u00bbon|10px|10px|10px|10px\u00bb border_width_all=\u00bb10px\u00bb border_color_all=\u00bb#0a0a0a\u00bb box_shadow_style=\u00bbpreset1&#8243; locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_image][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=\u00bb1&#8243; module_id=\u00bb6-make-the-mobile-menu-full-height\u00bb _builder_version=\u00bb4.4.5&#8243; custom_padding=\u00bb0px|||||\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_row _builder_version=\u00bb4.4.4&#8243; custom_padding=\u00bb||0px|||\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.4.4&#8243; global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.4.7&#8243; global_colors_info=\u00bb{}\u00bb]<\/p>\n<h2>6. Hacer que el men\u00fa para m\u00f3vil sea de altura completa<\/h2>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=\u00bb2_3,1_3&#8243; _builder_version=\u00bb4.4.4&#8243; custom_padding=\u00bb0px|||||\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb2_3&#8243; _builder_version=\u00bb4.4.4&#8243; global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.11.4&#8243; hover_enabled=\u00bb0&#8243; global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0&#8243;]Una vez que tengas el men\u00fa para m\u00f3vil de ancho completo, el siguiente paso es l\u00f3gico: dejar que el men\u00fa para m\u00f3vil llene toda la altura de la pantalla del dispositivo m\u00f3vil. Tambi\u00e9n agregaremos algo de relleno (50 px) a la parte superior.<\/p>\n<h3>Paso a paso<\/h3>\n<ol>\n<li>Inicia sesi\u00f3n en WordPress y ve a <strong>Divi<\/strong> &gt; <strong>Personalizador de temas<\/strong> &gt; <strong>CSS adicional<\/strong><\/li>\n<li>Pega el siguiente c\u00f3digo CSS:<\/li>\n<\/ol>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">\/* Hacer que el men\u00fa para m\u00f3vil sea de altura completa *\/\n\n.et_mobile_menu {\nmin-height:100vh !important;\nmin-height: -webkit-fill-available;\npadding-top:50px !important;\n}\nhtml {\nheight: -webkit-fill-available;\n}\n\/* Remove the animation to avoid delay *\/\n.mobile_nav.opened .et_mobile_menu {\ndisplay:block !important;\n}\n<\/pre>\n<p>2. Guarda los cambios.[\/et_pb_text][\/et_pb_column][et_pb_column type=\u00bb1_3&#8243; _builder_version=\u00bb4.4.4&#8243; global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.4.5&#8243; text_orientation=\u00bbcenter\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<h3>El resultado:<\/h3>\n<p>[\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/divimundo.com\/wp-content\/uploads\/2020\/05\/divi-mobilmeny6.png\u00bb align=\u00bbcenter\u00bb _builder_version=\u00bb4.4.4&#8243; custom_margin=\u00bb||12px||false|false\u00bb border_radii=\u00bbon|10px|10px|10px|10px\u00bb border_width_all=\u00bb10px\u00bb border_color_all=\u00bb#0a0a0a\u00bb box_shadow_style=\u00bbpreset1&#8243; locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_image][et_pb_text _builder_version=\u00bb4.4.7&#8243; text_font=\u00bb||on||||||\u00bb text_font_size=\u00bb15px\u00bb text_orientation=\u00bbcenter\u00bb locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<p><em>Usamos\u00a0<strong>min-height<\/strong>\u00a0en lugar de la\u00a0<strong>height<\/strong>\u00a0absoluta para evitar que el contenido que ocupe m\u00e1s del 100% de la altura de la pantalla se corte o quede fuera del men\u00fa.<\/em><\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=\u00bb1&#8243; module_id=\u00bball-css-snippets\u00bb _builder_version=\u00bb4.4.5&#8243; custom_padding=\u00bb0px|||||\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_row _builder_version=\u00bb4.4.4&#8243; custom_padding=\u00bb||0px|||\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.4.4&#8243; global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.4.5&#8243; global_colors_info=\u00bb{}\u00bb]<\/p>\n<h2>Todos los fragmentos CSS en un solo lugar<\/h2>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row column_structure=\u00bb2_3,1_3&#8243; _builder_version=\u00bb4.4.4&#8243; custom_padding=\u00bb0px|||||\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb2_3&#8243; _builder_version=\u00bb4.4.4&#8243; global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.11.4&#8243; hover_enabled=\u00bb0&#8243; global_colors_info=\u00bb{}\u00bb sticky_enabled=\u00bb0&#8243;]<\/p>\n<p>Aqu\u00ed est\u00e1n los seis fragmentos de CSS reunidos en un solo lugar.<\/p>\n<h3>Paso a paso<\/h3>\n<ol>\n<li>Inicia sesi\u00f3n en WordPress y ve a <strong>Divi<\/strong> &gt; <strong>Personalizador de temas<\/strong> &gt; <strong>CSS adicional<\/strong><\/li>\n<li>Pega el siguiente c\u00f3digo CSS:<\/li>\n<\/ol>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">\/* Agregar texto a la izquierda del men\u00fa hamburguesa en  Generador de temas *\/\n.et_mobile_nav_menu:before  {\ncontent: 'MEN\u00da';\nposition: absolute;\nright: 40px;\n}\n\n\/* Agregar texto a la izquierda del men\u00fa hamburguesa en Divi 3 *\/\n#et_mobile_nav_menu:before  {\ncontent: 'MEN\u00da';\nposition: absolute;\nright: 33px;\nbottom:30px;\n}\n\n\/* Cambiar el icono de colapso a una X en el men\u00fa hamburguesa *\/\n.mobile_nav.opened .mobile_menu_bar:before {\ncontent: \"\\4d\";\n}\n\n\/* Eliminar la l\u00ednea superior del men\u00fa para m\u00f3vil *\/\n.et_mobile_menu {\nborder-top:0px;\n}\n\n\/* Centrar el texto del men\u00fa para m\u00f3vil *\/\n.et_mobile_menu li {\ntext-align:center !important;\n}\n  \n.et_mobile_menu li li, .et_mobile_menu li ul {\npadding-left:0px !important;\n}\n\n\/* Hacer que el men\u00fa para m\u00f3vil tenga anchura completa *\/\n.et_mobile_menu {\nmin-width: 100vw;\nmargin-left: -10vw;\n}\n\n\/* Hacer que el men\u00fa para m\u00f3vil sea de altura completa *\/\n.et_mobile_menu {\nmin-height:100vh !important;\nmin-height: -webkit-fill-available;\npadding-top:50px !important;\n}\nhtml {\nheight: -webkit-fill-available;\n}\n\n\/* Remove the animation to avoid delay *\/\n.mobile_nav.opened .et_mobile_menu {\ndisplay:block !important;\n}\n<\/pre>\n<p>2. Guarda los cambios.<\/p>\n<p>[\/et_pb_text][\/et_pb_column][et_pb_column type=\u00bb1_3&#8243; _builder_version=\u00bb4.4.4&#8243; global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.4.5&#8243; text_orientation=\u00bbcenter\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<h3>El resultado:<\/h3>\n<p>[\/et_pb_text][et_pb_image src=\u00bbhttps:\/\/divimundo.com\/wp-content\/uploads\/2020\/05\/mobil-meny-efter1.gif\u00bb align=\u00bbcenter\u00bb _builder_version=\u00bb4.4.4&#8243; custom_margin=\u00bb||12px||false|false\u00bb border_radii=\u00bbon|10px|10px|10px|10px\u00bb border_width_all=\u00bb10px\u00bb border_color_all=\u00bb#0a0a0a\u00bb box_shadow_style=\u00bbpreset1&#8243; locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb][\/et_pb_image][et_pb_text _builder_version=\u00bb4.4.7&#8243; text_font=\u00bb||on||||||\u00bb text_font_size=\u00bb15px\u00bb text_orientation=\u00bbcenter\u00bb locked=\u00bboff\u00bb global_colors_info=\u00bb{}\u00bb]<\/p>\n<p align=\"center\" style=\"margin: 0cm; margin-bottom: .0001pt; text-align: center; line-height: 18.0pt; vertical-align: baseline;\"><i><span style=\"font-size: 11.5pt; font-family: Helvetica; color: #333333;\">\u00bfSab\u00edas que el tr\u00e1fico de Internet de m\u00f3viles super\u00f3 el tr\u00e1fico de Internet de los ordenadores en 2016?<o:p><\/o:p><\/span><\/i><\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section][et_pb_section fb_built=\u00bb1&#8243; _builder_version=\u00bb4.4.4&#8243; custom_padding=\u00bb0px|||||\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_row _builder_version=\u00bb4.4.4&#8243; custom_padding=\u00bb0px|||||\u00bb global_colors_info=\u00bb{}\u00bb][et_pb_column type=\u00bb4_4&#8243; _builder_version=\u00bb4.4.4&#8243; global_colors_info=\u00bb{}\u00bb][et_pb_text _builder_version=\u00bb4.4.7&#8243; global_colors_info=\u00bb{}\u00bb]<\/p>\n<h2>M\u00e1s trucos para un mejor men\u00fa para m\u00f3vil<\/h2>\n<p>Aqu\u00ed hay dos entradas de blog de Elegant Themes que llevar\u00e1 a tu men\u00fa para m\u00f3vil al siguiente nivel. Ten en cuenta de que la combinaci\u00f3n entre los los fragmentos de c\u00f3digo de este articulo y los consejos de Elegant Themes pueden podr\u00edan crear conflictos de dise\u00f1o. Ve probando y vigila que todo funcione bien.<\/p>\n<p>&nbsp;<\/p>\n<p><a href=\"http:\/\/www.elegantthemes.com\/affiliates\/idevaffiliate.php?id=40598&amp;amp&amp;url=40831\" target=\"_blank\" rel=\"noopener\">Plugin Divi gratuito con 20 estilos adicionales para tu men\u00fa hamburguesa<\/a><\/p>\n<p><a href=\"https:\/\/www.elegantthemes.com\/affiliates\/idevaffiliate.php?id=40598&amp;amp&amp;url=61078\" target=\"_blank\" rel=\"noopener\">Crear un men\u00fa anidado para m\u00f3vil con enlaces plegables<\/a><\/p>\n<p>[\/et_pb_text][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u2705 Funciona con Divi 4 (Generador de temas) \u2705 Funciona con Divi 3 (Personalizador de temas) \u2705 No se requieren plugins \u2705 No hay JavaScript o codificaci\u00f3n extensa<\/p>\n","protected":false},"author":1,"featured_media":32824,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[238,21,352],"tags":[],"class_list":["post-32898","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-divi-2","category-divi-es","category-tutoriales"],"_links":{"self":[{"href":"https:\/\/divimundo.com\/es\/wp-json\/wp\/v2\/posts\/32898","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/divimundo.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/divimundo.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/divimundo.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/divimundo.com\/es\/wp-json\/wp\/v2\/comments?post=32898"}],"version-history":[{"count":0,"href":"https:\/\/divimundo.com\/es\/wp-json\/wp\/v2\/posts\/32898\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/divimundo.com\/es\/wp-json\/wp\/v2\/media\/32824"}],"wp:attachment":[{"href":"https:\/\/divimundo.com\/es\/wp-json\/wp\/v2\/media?parent=32898"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/divimundo.com\/es\/wp-json\/wp\/v2\/categories?post=32898"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/divimundo.com\/es\/wp-json\/wp\/v2\/tags?post=32898"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}