3 min 14/11/2018

Cuando creas una página web con Divi, entre las muchas opciones de personalización, puedes poner el menú o la barra de navegación (header) fija de manera que al hacer scroll por la página el menú siempre esté visible. Desde mi punto de vista, esto es maravilloso para la usabilidad ya que siempre tienes visible toda la estructura del sitio web. Pero con Divi esta opción solo es posible en la versión de escritorio. En este artículo te voy a contar como hacer fijo el menú móvil con Divi con unas pocas líneas de código.

A mi me encanta que mis visitantes vean mis enlaces a redes sociales, mi email o incluso mi número de móvil en la barra de navegación secundaria nada más cargar la página, pero al hacer scroll y tener activada la opción de barra de navegación fija (tanto en versión de escritorio como ya sabes o en versión móvil como te voy explicar en este artículo), la barra de navegación secundaria también queda fija, ocupando espacio. Por un lado es positivo para tener siempre a mano una llamada a la acción, pero por otro lado ocupa espacio y, especialmente en la versión móvil, eso es negativo desde mi punto de vista. En este artículo te voy a contar como poner fija solo la barra del menú principal, ocultando la barra del menú secundario al hacer scroll.

Poner fija la barra de navegación o menú en el móvil con CSS

Para poner el menú móvil fijo con CSS tienes que añadir en Apariencia -> Personalizar -> CSS adicional las siguientes líneas de código:

Con ello ya tendrás tu barra de navegación fija en la versión móvil de tu web. Pero si usas la barra de menú secundario, esta también quedará fija.

@media (max-width: 980px){
.et_non_fixed_nav.et_transparent_nav #main-header, 
.et_non_fixed_nav.et_transparent_nav #top-header, 
.et_fixed_nav #main-header, 
.et_fixed_nav #top-header {
    position: fixed !important; 
}
}
.et_mobile_menu {
    overflow: scroll !important;
    max-height: 83vh;
}

Como ocultar la barra de navegación del menú secundario al hacer scroll

Este método, que es el que uso yo en mi página web, es válido para ocultar tanto la barra de navegación secundaria en la versión de escritorio como en la versión móvil. Para ello tenemos que recurrir a javaScript y jQuery. Hay muchas maneras de añadir javaScript en tu WordPress. Puedes recurrir a alguno de los innumerables plugins que hay para ello, o añadirlo manualmente. Yo personalmente me decanto por esta última opción, cuantos menos plugins instalemos mejor y más aun cuando la solución es fácil.

Añadir un archivo javaScript en la plantilla WordPress

Lo primero que tenemos que hacer es añadir un archivo javaScript a nuestra plantilla o child-theme (plantilla hijo). Para ello hay que tener acceso al panel de control del servidor o acceso por ftp. 

Accediendo por el panel de control (yo lo considero la forma más fácil), vas a Administrador de archivos y te abre una ventana nueva.

Tienes que navegar a public_html (o la carpeta en la que se encuentre tu instalación) -> wp-content -> themes -> tu tema activo.

Creamos una nueva carpeta llamada js y dentro de ella un nuevo archivo llamado main.js (los nombres puedes ponerles los que tu quieras, pero las posteriores referencias también deben ir con ellos).

Marcamos el archivo main.js y pulsamos en editar. 

Nos abre una nueva ventana y en ella introducimos el siguiente código:

jQuery(function(){
    jQuery(window).scroll(function(){
        var dist=31;
        if(jQuery('#wpadminbar').css('display')=='block'){
            dist=63;
        }
        if(jQuery(window).scrollTop()<=dist){
            jQuery('#main-header').css({'position':'absolute','top':dist});
        }else{
            jQuery('#main-header').css({'position':'fixed','top':dist-31});
        }
    });
});

Ahora le damos a guardar cambios y ya hemos añadido todo el código javaScript necesario para que se oculte la barra de navegación secundaria al hacer scroll y que quede fija solo la principal, incluso cuando estás logueado y tienes la barra de administrador de WordPress. Comentar que este archivo valdría ya para añadir cualquier código en javaScript que necesites.

Declarar el archivo javaScript en functions.php

Para que el código anterior funcione tenemos que añadirlo en el functions.php de nuestro tema activo. La manera más fácil, y una vez que estamos en el administrador de archivos de nuestro servidor, es abrirlo marcando dicho archivo y pulsando en editar. También se puede hacer desde Apariencia -> Editor. Una vez abierto añadimos el siguiente código:

add_action('wp_enqueue_scripts', 'add_theme_js');

//funcion para añadir el archivo js donde trato datos de formulario
function add_theme_js(){
		wp_register_script('miscript', get_stylesheet_directory_uri().'/js/main.js', array('jquery'), '1', true );
    	wp_enqueue_script('miscript');
}

Acordaros que los nombres después de get_stylesheet_directory_uri() deben ser los que pongas tú.

Quitar la propiedad fixed a la barra de menú secundario

El último paso que tenemos que dar es quitar la propiedad fixed de la barra del menú secundario, ya que sino queda igualmente fija. Vamos a Apariencia -> Personalizar -> CSS adicional y añadimos:

#top-header{
  position:absolute !important;
}

Y con esto ya tenemos listo nuestra barra del menú principal para que se quede fija tanto en la versión de escritorio como en la móvil y que se oculte la barra de navegación secundaria.

Conclusión

Divi es una plantilla excelente para hacer páginas web y con su maravilloso constructor de páginas te ahorras muchas horas de trabajo. Pero para pequeños detalles de personalización es imprescindible recurrir al código.

Espero haberte ayudado con este post a personalizar la cabecera de web hecha con Divi. Un saludo amigo lector!!

Publicaciones Similares

3 comentarios

    1. Si diseñas el header y el footer con las nuevas opciones de diseño de Theme Builder, creo que no, pero no probé esa opción. Si haces esa personalización desde apariencia->personalizar, debería funcionar exactamente igual. Saludos

Deja una respuesta

Tu dirección de correo electrónico no será publicada.