Cómo obtener un menú móvil diferente al menú del escritorio en el tema de veinte y doce hijos

2

Me gustaría usar un menú diferente para mi sitio web móvil que el sitio web de mi escritorio. Con diferente me refiero al contenido no al layout. Solo quiero usar el menú móvil del tema veinte y doce.

Lo que he hecho hasta ahora:

En mi niño functions.php he agregado el siguiente código:

     register_nav_menus( array(
     'primary' => __( 'Primary Navigation', 'twentytwelve' ),
     'mobile' => __( 'Mobile Navigation', 'mobile'),
     ) );

Ahora puedo crear dos menús en mi panel de control. (panel > menú > locaties)

En header.php no sé exactamente qué cambiar, por lo que mi menú móvil se carga en lugar de mi menú principal.

    <nav id="site-navigation" class="main-navigation" role="navigation">
        <button class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></button>
        <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
        <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
    </nav><!-- #site-navigation -->

Intenté cambiar <?php _e( 'Menu', 'twentytwelve' ); ?> a <?php _e( 'Menu', 'mobile' ); ?> , pero esto no cambió el contenido del menú a mi menú móvil.

No estoy familiarizado con este código, así que espero que alguien pueda indicarme la dirección correcta.

¡Gracias por tu ayuda!

    
pregunta patrick 26.04.2015 - 15:56

3 respuestas

4

Como se recomienda en una publicación similar: enlace

1.) Cree los menús como desee, y asígnele el nombre que desee, como ejemplo " menú móvil "y" menú de escritorio ".

2.) En su tema secundario en el header.php, puede cambiar de acuerdo con el indicador wp_is_mobile () de esta manera:

if ( wp_is_mobile() ) {
     wp_nav_menu( array( 'menu' => 'mobile-menu' ) );
} else {
     wp_nav_menu( array( 'menu' => 'desktop-menu' ) );
}

Sin embargo utilicé el complemento "WP Responsive Menu", que también me permitió seleccionar un menú para dispositivos móviles. En la configuración del "Menú Responsivo de WP", es necesario seleccionar el elemento que NO se mostrará en el móvil, que en el caso del tema de los veinte doce es: "# site-navigation".

¡Feliz codificación!

    
respondido por el Nikolai 08.06.2015 - 15:07
0

Además del comentario de Jordans, es importante saber cómo agregar una clase a un elemento del menú en Wordpress:

Para agregar clases CSS a un menú de WordPress, primero vaya a Apariencia > Menús en su tema de WordPress. A continuación, busque la pestaña Opciones de pantalla en la parte superior derecha de la pantalla. Haga clic para abrir el panel y marque la casilla etiquetada Clases CSS. Seleccione el menú que desea editar y haga clic en el enlace al que desea agregar una clase CSS.

    
respondido por el Jeroen Onstenk 04.08.2018 - 14:39
0

Si alguien sigue viendo este hilo, he estado luchando con esto por un tiempo, ninguno de estos funcionó ... ¡Podría hacerlo con CSS!

Básicamente, cree un menú gigante con todos los elementos que desee en dispositivos móviles y de escritorio. Luego, agregue clases: "hide-mobile" y "hide-desktop" en sus respectivos elementos de menú.

Usa este CSS:

@media (min-width: 980px){

    .hide-desktop{
    display: none !important;
    }

}

    @media (max-width: 980px){
    .hide-mobile{
    display: none !important;
    }

}
    
respondido por el Jordan 23.02.2018 - 16:19

Lea otras preguntas en las etiquetas