Saltar al contenido

Cómo ocultar el menú de hamburguesas divi en un ejemplo de código solo para dispositivos móviles

Te damos la bienvenida a proyecto online, en este lugar encontrarás la respuesta de lo que andabas buscando.

Ejemplo 1: menú lateral de hamburguesas divi

/*show hamburger menu on desktop*/@media(min-width:980px).et_pb_menu.et_pb_menu__menu,.et_pb_fullwidth_menu.et_pb_menu__menudisplay: none;.et_pb_menu.et_mobile_nav_menu,.et_pb_fullwidth_menu.et_mobile_nav_menudisplay: flex;float: none;margin:06px;align-items: center;

Ejemplo 2: configuración de navegación de hamburguesa y fija divi

@media screen and(max-width:980px).containerwidth:100%!important;.et_header_style_left.logo_containerpadding-left:25px;.et_header_style_centered#main-header.mobile_navbackground-color:transparent;.mobile_nav.closed.select_pagedisplay: none;.et-fixed-header#main-headerbackground-color:transparent!important;.et_mobile_menutop:0!important;border-top:3px solid #283fc0!important;;background-color:#fff!important;padding:20%0;.et_mobile_menu li atext-align: center;font-size:.8em;border:0;padding:15px0;letter-spacing:1px;.mobile_nav ul#mobile_menu.current_page_item> acolor:#283fc0;.mobile_nav ul#mobile_menu li ul li afont-size:.8em!important;margin: auto;color:#363636!important;padding-top:0.2em;.et_mobile_menu li a:hovercolor:#999;-webkit-transition: all .2s ease-in-out;transition: all .2s ease-in-out;.mobile_menu_bar:beforepadding-right:25px;color:#363636!important;.mobile_nav.opened.mobile_menu_bar:beforecontent:"4d";z-index:99999;/* NESTING MOBILE MENU SETTINGS */#et_mobile_nav_menu.mobile_nav.opened.mobile_menu_bar::beforecontent:'4d';#top-menu.menu-item-has-children.menu-item-has-children> a:first-child::after,#et-secondary-nav.menu-item-has-children.menu-item-has-children> a:first-child::aftercontent:'5';#main-header#mobile_menu.et_mobile_menu.menu-item-has-childrenposition: relative;#main-header#mobile_menu.et_mobile_menu.sub-menu-toggleposition: absolute;background-color:rgba(0,0,0,0.03);z-index:1;width:36px;height:36px;line-height:36px;border-radius:50%;top:6px;right:10px;cursor: pointer;text-align: center;#main-header#mobile_menu.et_mobile_menu.sub-menu-toggle.poppedbackground-color:rgba(0,0,0,0.1);#main-header#mobile_menu.et_mobile_menu.sub-menu-toggle::beforefont-family:"ETmodules"!important;font-weight: normal;font-style: normal;font-variant: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;line-height:36px;font-size:24px;text-transform: none;speak: none;content:'33';#main-header#mobile_menu.et_mobile_menu.sub-menu-toggle.popped::beforecontent:'32';#main-header#mobile_menu.et_mobile_menu.sub-menu-toggle~ ul.sub-menudisplay: none !important;padding-left:0;#main-header#mobile_menu.et_mobile_menu.sub-menu-toggle.popped~ ul.sub-menudisplay: block !important;background-color:rgba(0,0,0,0.03);#main-header#mobile_menu.et_mobile_menu li lipadding-left:0;#main-header#mobile_menu.et_mobile_menu li a,#main-header#mobile_menu.et_mobile_menu li li a,#main-header#mobile_menu.et_mobile_menu li li li apadding-left:20px;padding-right:20px;#main-header#mobile_menu.et_mobile_menu.menu-item-has-children.sub-menu-toggle+ apadding-right:20px;#main-header#mobile_menu.et_mobile_menu.menu-item-has-children> abackground-color:transparent;font-weight: inherit;#main-header#mobile_menu.et_mobile_menu li.current-menu-item> afont-weight: bolder;

Agradecemos que quieras amparar nuestra misión exponiendo un comentario y dejando una puntuación te estamos eternamente agradecidos.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *