Soporte » Diseño – Temas y plantillas » Problema con menú móvil

  • mrnat2

    (@mrnat2)


    Buenos días, estoy trabajando en el desarrollo de una página web y para aplicar la propiedad sticky a la barra de navegación opté por mover su código del header al cuerpo, dado que me agrada que de inicio el menú esté abajo y luego se quede fijo arriba, pero si formaba parte de la cabecera no se me ocurría forma de dejarlo estático.

    El caso es que al hacer esto el menú móvil se ha deshabilitado y no soy capaz de encontrar el problema. Básicamente, el código php originalmente estaba en header.php y era el siguiente:

    <!DOCTYPE html>
    <html <?php language_attributes(); ?> class="no-js no-svg">
    <head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="profile" href="https://gmpg.org/xfn/11">
    <meta content="visitar galicia, que ver en galicia, turismo galicia, guia turistico galicia, excursiones galicia, vacaciones galicia, visita guiada galicia, que hacer en galicia" name="keywords">
    <?php wp_head(); 
    	?>
    
    	</head>
    
    <body <?php body_class(); ?>>
    <?php wp_body_open(); ?>
    <div id="page" class="site">
    	<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'twentyseventeen' ); ?></a>
    
    	<header id="masthead" class="site-header" role="banner">
    
    		<?php get_template_part( 'template-parts/header/header', 'image' ); ?>
    
    		<?php if ( has_nav_menu( 'top' ) ) : ?>
    			<div class="navigation-top">
    				<div class="wrap">
    					<?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>
    				</div><!-- .wrap -->
    			</div><!-- .navigation-top -->
    		<?php endif; ?>
    
    	</header><!-- #masthead -->
    
    	<?php
    
    	/*
    	 * If a regular post or page, and not the front page, show the featured image.
    	 * Using get_queried_object_id() here since the $post global may not be set before a call to the_post().
    	 */
    	if ( ( is_single() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) && has_post_thumbnail( get_queried_object_id() ) ) :
    		echo '<div class="single-featured-image-header">';
    		echo get_the_post_thumbnail( get_queried_object_id(), 'twentyseventeen-featured-image' );
    		echo '</div><!-- .single-featured-image-header -->';
    	endif;
    	?>
    
    	<div class="site-content-contain">
    		<div id="content" class="site-content">

    Le retiré esta parte de aquí:

    <?php if ( has_nav_menu( 'top' ) ) : ?>
    			<div class="navigation-top">
    				<div class="wrap">
    					<?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>
    				</div><!-- .wrap -->
    			</div><!-- .navigation-top -->
    		<?php endif; ?>

    Y lo añadí en las páginas frontal y simples, tal que así (dejo solo el frontal):

    get_header(); ?>
    
    <div id="primary" class="content-area">
    	
    <?php if ( has_nav_menu( 'top' ) ) : ?>
    			<div class="navigation-top">
    				<div class="wrap">
    					<?php get_template_part( 'template-parts/navigation/navigation', 'top' ); ?>
    				</div><!-- .wrap -->
    			</div><!-- .navigation-top -->
    		<?php endif; ?>	
    	
    	
    	<main id="main" class="site-main" role="main">
    
    		<?php
    		// Show the selected front page content.
    		if ( have_posts() ) :
    			while ( have_posts() ) :
    				the_post();
    				get_template_part( 'template-parts/page/content', 'front-page' );
    			endwhile;
    		else :
    			get_template_part( 'template-parts/post/content', 'none' );
    		endif;
    		?>
    
    		<?php
    		// Get each of our panels and show the post data.
    		if ( 0 !== twentyseventeen_panel_count() || is_customize_preview() ) : // If we have pages to show.
    
    			/**
    			 * Filter number of front page sections in Twenty Seventeen.
    			 *
    			 * @since Twenty Seventeen 1.0
    			 *
    			 * @param int $num_sections Number of front page sections.
    			 */
    			$num_sections = apply_filters( 'twentyseventeen_front_page_sections', 4 );
    			global $twentyseventeencounter;
    
    			// Create a setting and control for each of the sections available in the theme.
    			for ( $i = 1; $i < ( 1 + $num_sections ); $i++ ) {
    				$twentyseventeencounter = $i;
    				twentyseventeen_front_page_section( null, $i );
    			}
    
    	endif; // The if ( 0 !== twentyseventeen_panel_count() ) ends here.
    		?>
    
    	</main><!-- #main -->
    </div><!-- #primary -->
    
    <?php
    get_footer();
    ?>

    El caso es que he revisado varias veces el JS y otros módulos PHP y no se me ocurre cómo dar con una solución para que el menú móvil «reviva». ¿Alguien podría echarme una mano?

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 1 respuesta (de un total de 1)
  • kallookoo

    (@kallookoo)

    Hola @mrnat2

    Tu problema esta en que se usa javascript y modificastes el html provocando que deje de funcionar y por cierto tambien tienes un error en el archivo 400.js.

    Cuando se modifica un theme se tiene que mirar con tranquilidad todo el codigo para saber que hace cada cosa, para evitar justamente lo que te esta sucediendo.
    Luego la position sticky, no te la recomiendo al no estar bien soportada en todos los navegadores. Puedes verlo tu mismo aqui; https://caniuse.com/css-sticky

    Te sugiero que uses javascript para simular la position fixed al hacer scroll, existen varios tutoriales en internet y te evitas incompatibilidades en los navegadores.
    O busques un theme mas parecido al diseño que desea en vez de modificar uno y complicarse la vida modificandolo.

Viendo 1 respuesta (de un total de 1)
  • El debate ‘Problema con menú móvil’ está cerrado a nuevas respuestas.