Hoy les traego un hermoso menú que encontre navegando por la red.

Ya desde hace tiempo queria diseñar algo para cambiar el menú que siempre vemos, por eso aproveche a contáctar a los de
Gograyons para perdiles permiso de que me dejaran pasar su tutorial español, como respuesta fue positivia
es por que ahora les traego este hermoso menú para moviles (Smartphone y tablet ), claro les hice unos pequeños cambios

pero aquí les dejo el tutorial original ( https://gocrayons.com/tutorial/how-to-create-beautiful-mobile-menu-using-divi-theme/ )

Empecemos con nuestro tutorial ( Cómo crear un hermoso menú móvil usando el tema DIVI. )

Cómo crear un hermoso menú móvil usando el tema DIVI.

Primero tenemos que ir a personalizador del tema

No se necesita mucha explicación

1.- Personalizador del tema.
2.-Seleccionar Encabezado y navegación
3.-Formato de encabezado
Estilo de encabezado = Pantalla completa

Integramos font awesome

1.- DIVI
2.- Pestaña de integración
3.- colocamos el siguiente codigo en head /encabezado.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" 
integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" 
crossorigin="anonymous">

Añadir iconos o imagenes al menú de navegación

Yo utilice los iconos de font awesome, es más rápido, si piensa utilizar imágenes
recuerde que deben de estar todas del mismo tamaño, o le causara error.

Dejare el código para imágenes como los iconos de font awesome

Font Awesome Iconos

<i class=”fab fa-youtube”></i> Tutoriales (Cambiar el nombre por la pestaña)

Imagenes

<img src=http://propuesta.realeza.com.mx/wp-content/uploads/2018/06/9-icon.png> (Nombre de la pestaña)

Menú responsive

Este código muestra el menu por default (el normal) cuando este en tablet o smartphone, mostrara el nuevo menú
Yo lo modifique un poco, por que no me habia funcionado ( pueden ver el codigo original en: gograyons )

/* ************************** */
/* ** menu responsive ** */
/* ************************** */

 
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened
.et_pb_fullscreen_menu_animated ul#mobile_menu_slide {
    padding:  0 !important;
    display:  block !important;
}
 
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened
.et_pb_fullscreen_menu_animated ul#mobile_menu_slide li {
    display:  inline-block;
}
 
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened
.et_pb_fullscreen_menu_animated ul#mobile_menu_slide li img, 
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened
.et_pb_fullscreen_menu_animated ul#mobile_menu_slide li i, 
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened
.et_pb_fullscreen_menu_animated ul#mobile_menu_slide li svg.svg-inline--fa {
    display:  none;
}
 
.et_slide_in_menu_container {
opacity:  1 !important;
}
 
.et_pb_fullscreen_nav_container {
    opacity:  1;
}
 
 
 
 
.et_pb_fullscreen_nav_container ul#mobile_menu_slide {
    opacity: 1!important;
    visibility: visible;
    display: block !important;
    text-align: right;
    width: 100%;
    padding-right: 22%;
    height: initial;
    padding-top: 9px;
}
 
.et_pb_fullscreen_nav_container ul#mobile_menu_slide li {
    display:  inline-block;
}
 
.et_pb_fullscreen_nav_container ul#mobile_menu_slide li img, 
.et_pb_fullscreen_nav_container ul#mobile_menu_slide li i {
    display:  none;
}
 
.et_pb_fullscreen_nav_container ul#mobile_menu_slide li {
    padding:  0 2%;
}
 
.et_pb_fullscreen_nav_container ul#mobile_menu_slide li a {
    font-size:  17px;
    text-transform:  uppercase;
}
 
span.mobile_menu_bar.et_pb_header_toggle.et_toggle_fullscreen_menu {
    opacity:  1;
}
 
div#page-container[style="padding-top: 96px; overflow-y: hidden; 
margin-top: -43px;"] {}
 
div#page-container[style="padding-top: 96px; overflow-y: hidden;
 margin-top: -43px;"] ul#mobile_menu_slide li a {
    font-size:  13px;
}
 
div#page-container[style="padding-top: 96px; overflow-y: hidden;
 margin-top: -43px;"] ul#mobile_menu_slide li {
    margin-top: -15px;
}
 
div#page-container[style="padding-top: 96px; overflow-y: hidden; 
margin-top: -43px;"] ul#mobile_menu_slide {
    margin-top: -14px;
}
 

@media screen and (max-width: 1190px){
.et_pb_fullscreen_nav_container ul#mobile_menu_slide {
    padding-right: 8%;
}
}
 
@media screen and (max-width: 980px){
.et_header_style_fullscreen .et_pb_fullscreen_nav_container {
    max-width: 499px;
    margin: 0 auto;
}
header#main-header {
    padding: 5px 0;
}
span.mobile_menu_bar.et_pb_header_toggle.et_toggle_fullscreen_menu {
    opacity: 1;
}
.et_pb_fullscreen_nav_container ul#mobile_menu_slide {
    display: none !important;
}
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened
.et_pb_fullscreen_menu_animated {
    background: 
url(http://propuesta.realeza.com.mx/wp-content/uploads/2018/06/espacio-space.jpg)
 !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    padding-bottom: 72px;
}
 
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened
.et_pb_fullscreen_menu_animated:before {
    width:  100%;
    height:  100%;
    position:  absolute;
    left:  0;
    right:  0;
    top: 0;
    content:  '';
    background: rgba(0, 0, 0, 0.61);
}
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened
.et_pb_fullscreen_menu_animated ul#mobile_menu_slide {
    display: table-cell!important;
    position: relative;
    width: auto;
    height: 100%;
    padding: 0;
    text-align: center;
    vertical-align: middle;
}
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened
.et_pb_fullscreen_menu_animated ul#mobile_menu_slide li {
    display: block;
    width: 33.3%;
    float: left;
    padding-bottom: 6vh!important;
    padding-right: 0!important;
}
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened
.et_pb_fullscreen_menu_animated ul#mobile_menu_slide li i:before {
    font-size:  38px;
}
 
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened
.et_pb_fullscreen_menu_animated ul#mobile_menu_slide li img {
    padding: 18px 19px!important;
}
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened
.et_pb_fullscreen_menu_animated ul#mobile_menu_slide li img,
 .et_slide_in_menu_container.et_pb_fullscreen_menu_opened
.et_pb_fullscreen_menu_animated ul#mobile_menu_slide li i, 
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened
.et_pb_fullscreen_menu_animated ul#mobile_menu_slide li svg.svg-inline--fa {
    display: block;
    background: #003a66;
    width: 75px;
    height: 75px;
    padding: 18px 0;
    border-radius: 15px;
    margin-bottom: 24px;
}
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated {
    -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
    transition: transform 0.4s, opacity 0.4s;
}
body #page-container .et_slide_in_menu_container {
    transform: scale(1);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
    transition: transform 0.4s, opacity 0.4s;
}
.et_header_style_fullscreen 
.et_slide_in_menu_container span.mobile_menu_bar.et_toggle_fullscreen_menu:before {
    border: 1px solid #003a66;
    color: #003a66;
    border-radius: 50%;
    padding: 6px;
}
.et_header_style_fullscreen 
.et_slide_in_menu_container span.mobile_menu_bar.et_toggle_fullscreen_menu {
    bottom: 25px !important;
    top: initial!important;
    left: 0;
    right: 0;
    text-align: center;
}
}
 
@media screen and (max-width: 414px){
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened
.et_pb_fullscreen_menu_animated ul#mobile_menu_slide li img,
 .et_slide_in_menu_container.et_pb_fullscreen_menu_opened
.et_pb_fullscreen_menu_animated ul#mobile_menu_slide li i, 
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened
.et_pb_fullscreen_menu_animated ul#mobile_menu_slide li svg.svg-inline--fa {
    display: block;
    background: #003a66;
    width: 60px;
    height: 60px;
    padding: 14px 0;
    border-radius: 15px;
    margin-bottom: 24px;
    margin: 0 auto 10px;
}
.et_slide_in_menu_container.et_pb_fullscreen_menu_opened
.et_pb_fullscreen_menu_animated ul#mobile_menu_slide li img {
    padding: 15px 16px!important;
}
}

¿Te parece interesante este artículo?
Puntaje
[Total: 0 Average: 0]

Suscríbete a nuestro boletín.

Recibe notificaciones cuando publiquemos algo nuevo.

Gracias por suscribirte

Shares