Seleccionar página

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]

Pin It on Pinterest

Shares