Cómo hacer coincidir la barra de menú de su escritorio y móvil con Divi

En la publicación Divi de hoy, vamos a compartir un consejo rápido que lo ayudará a mejorar sus diseños móviles. Todos sabemos que su diseño en el móvil es tan importante como en el escritorio, pero debido a algunas configuraciones estándar dentro de Divi, no todos los cambios que realiza en el Personalizador de temas tienen el mismo aspecto en el escritorio que en el móvil.

Lo que vamos a hacer en esta publicación, específicamente, es mostrarle cómo crear una barra de menú móvil más pequeña que se vea igual que la barra de menú en el escritorio cuando se usa la altura máxima del logotipo y la altura mínima del menú. De forma predeterminada, la perspectiva en dispositivos móviles y de escritorio es diferente. El hecho de que haya establecido una cierta altura del menú y la altura máxima del logotipo, no significa que se aplicará lo mismo a los dispositivos móviles.

La diferencia entre dispositivos móviles y computadoras de escritorio

Hay muchos sitios web que eligen deliberadamente tener una barra de menú principal sin mucha altura. Simplemente se ve más elegante y ocupa menos espacio, algo que definitivamente es interesante de considerar si también está usando la navegación fija.

Cuando elige el valor más alto para la Altura máxima del logotipo (que es 100) dentro de su Personalizador de temas, y el valor más bajo de la Altura del menú (que es 30), obtendrá el siguiente resultado en el escritorio:

Sin embargo, las proporciones del logotipo y la altura del menú son diferentes para dispositivos móviles. Si ha seleccionado el valor más alto para la Altura máxima del logotipo y el valor más bajo para la Altura del menú, no obtendrá el mismo resultado que en el escritorio. El resultado que obtendrá, en cambio, se verá así:

Resultado

Ahora, lo que vamos a hacer es mostrarle cómo hacer que el mismo diseño se aplique a la barra de menú de su dispositivo móvil. Eso significa que el logo tendrá su altura máxima en el menú. Además de eso, la barra de menú en sí será mucho más pequeña. Con el tiempo, le quedará más espacio en la pantalla para que aparezca el contenido de su página.

Después de haber seguido este tutorial paso a paso, obtendrá el siguiente resultado:

Que obviamente se parece más a la versión de escritorio:

Cómo hacer coincidir la barra de menú de su escritorio y móvil con Divi

Suscríbete a nuestro canal de Youtube

Configuración de la barra de menú principal

Lo primero que haremos es realizar los cambios necesarios en la barra de menú principal dentro del Personalizador de temas. Si está en su panel de WordPress, vaya a Apariencia> Personalizar> Encabezado y navegación> Barra de menú principal y asegúrese de que se apliquen las siguientes configuraciones:

• Ocultar imagen de logotipo: Desactivar
• Altura del menú: 30
• Altura máxima del logotipo: 100

Código CSS adicional de la barra de menú móvil

Lo siguiente que tendremos que hacer es agregar código CSS adicional para que la barra de menú móvil tenga el mismo aspecto que la barra de menú en el escritorio. Podemos optar por agregar el código CSS a una página en particular (si solo queremos mostrar el menú de esa manera solo en ciertas páginas) o en todo el sitio web. Por lo general, aplicará el código CSS a todo el sitio web para mantener la coherencia necesaria en su sitio web, pero eso depende de usted.

Agregar código CSS a una página en particular

Para agregar el código CSS a una página en particular, deberá abrir la página dentro de su panel de WordPress. Mientras usa el constructor Divi, tendrá que hacer clic en el siguiente ícono dentro de él:

A continuación, puede tomar las siguientes líneas de código CSS y colocarlas en el campo CSS personalizado:

@media (max-width: 980px) {
#page-container {
padding-top: 43px !important;
} 
}
@media (max-width: 980px) {
#logo {
max-width: 100% !important;
max-height: 90% !important;
}
}
@media (max-width: 980px) {
#mainheader {
top: 4% !important;
}
}
@media (max-width: 980px) {
#et-top-navigation{
padding-top: 5px !important;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
padding-bottom: 5px;
}

Agregar código CSS a todo el sitio web

La otra posibilidad, y probablemente la que más se utilizará, es agregar el código a todo su sitio web. Hay dos maneras de hacerlo.

A través del personalizador de temas

El primer método consiste en agregar el código CSS a su personalizador de temas. Para hacerlo, vaya a su Tablero de WordPress> Apariencia> Personalizar> CSS adicional> Coloque las siguientes líneas de código CSS en el campo CSS personalizado:

@media (max-width: 980px) {
#page-container {
padding-top: 43px !important;
} 
}
@media (max-width: 980px) {
#logo {
max-width: 100% !important;
max-height: 90% !important;
}
}
@media (max-width: 980px) {
#mainheader {
top: 4% !important;
}
}
@media (max-width: 980px) {
#et-top-navigation{
padding-top: 5px !important;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
padding-bottom: 5px;
}

Esta opción le permite ver los cambios que ocurren en tiempo real. Esta es probablemente la opción más interesante si va a cambiar algunas cosas en el código y quiere ver cómo se ve antes de guardar los cambios.

A través de las opciones del tema

El segundo método consiste en agregar el código CSS a las Opciones de tema. Para hacerlo, vaya a su Tablero de WordPress> Divi> Opciones de tema> Desplácese hacia abajo en la pestaña General y coloque el siguiente código CSS en el campo CSS personalizado:

@media (max-width: 980px) {
#page-container {
padding-top: 43px !important;
} 
}
@media (max-width: 980px) {
#logo {
max-width: 100% !important;
max-height: 90% !important;
}
}
@media (max-width: 980px) {
#mainheader {
top: 4% !important;
}
}
@media (max-width: 980px) {
#et-top-navigation{
padding-top: 5px !important;
}}
.et_header_style_split .mobile_menu_bar,
.et_header_style_left .mobile_menu_bar {
padding-bottom: 5px;
}

Modifique el código según sus propias preferencias

Por supuesto, esta no es la única forma en que puede hacer que la barra de menú móvil se vea así. Si está aplicando diferentes configuraciones a su barra de menú principal en el Personalizador de temas, es muy probable que también deba realizar los cambios dentro del código CSS. Sin embargo, las clases de CSS y las ID de CSS que utilizará son las mismas.

Sin embargo, una de las cosas que definitivamente tendrás que tener en cuenta es el relleno superior del contenedor de la página. El valor que asignamos en nuestro código CSS coincide con los otros cambios que hemos realizado. Sin embargo, si cambia los valores en las otras clases, deberá asegurarse de que el relleno superior permanezca correcto. La forma más sencilla de hacerlo es comenzar con un valor más alto y modificar el valor hasta que observe cómo el contenedor de la página se coloca en su lugar.

Resultado

Si ha seguido este tutorial paso a paso, debería haber podido lograr el siguiente resultado para la barra de menú de su dispositivo móvil:

Que se ve casi exactamente igual que el resultado que obtiene en los escritorios:

Antes de realizar cambios en CSS, el resultado en dispositivos móviles se ve así:

Pensamientos finales

En esta publicación, le mostramos cómo hacer que la barra de menú de su dispositivo móvil sea más pequeña y se ajuste a la barra de menú en los escritorios. Simplemente puede agregar el código CSS necesario a una página en particular o al sitio web completo para que este método funcione. Si tiene alguna pregunta o sugerencia; ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!

¡Asegúrese de suscribirse a nuestro boletín informativo por correo electrónico y al canal de YouTube para que nunca se pierda un gran anuncio, un consejo útil o un obsequio de Divi!