Second Responsive Menu


#1

Hello !

I would like create a second responsive menu (like mainnav with btn-menu).
So I created un second menu in my sydney-child theme.

I think to have duplicated all elements like mainnav, mainnav-mobi and btn-menu in style.css, respectively secondnav, secondnav-mobi and btn-raccourcis.

in header.php, I added that :

<div class="btn-raccourcis"></div>
 <nav id="secondnav-mobi" class="secondnav" role="navigation">
 <?php wp_nav_menu( array( 'theme_location' => 'secondary') ); ?>

in functions.php I added that :

wp_dequeue_script( 'sydney-main' );
wp_enqueue_script( 'sydney-main', get_template_directory_uri() . '/js/main.js', array('jquery'),'', true );
register_nav_menus(array(
    'secondary' => __('Secondary Menu', 'raccourcis'),
));

in main.js I modified the function :
`var responsiveMenu = function() {
var menuType = ‘desktop’;

	$(window).on('load resize', function() {
		var currMenuType = 'desktop';

		if ( matchMedia( 'only screen and (max-width: 1024px)' ).matches ) {
			currMenuType = 'mobile';
		}

		if ( currMenuType !== menuType ) {
			menuType = currMenuType;

			if ( currMenuType === 'mobile' ) {
				var $mobileRaccourcis = $('#secondnav').attr('id', 'secondnav-mobi').hide();
				$('.btn-raccourcis').removeClass('active');
									
				var $mobileMenu = $('#mainnav').attr('id', 'mainnav-mobi').hide();
				var hasChildMenu = $('#mainnav-mobi').find('li:has(ul)');

				$('#header').find('.header-wrap').after($mobileMenu);
				hasChildMenu.children('ul').hide();
				hasChildMenu.children('a').after('&lt;span class="btn-submenu"&gt;&lt;/span&gt;');
				$('.btn-menu').removeClass('active');
			} else {
				var $desktopMenu = $('#mainnav-mobi').attr('id', 'mainnav').removeAttr('style');

				$desktopMenu.find('.submenu').removeAttr('style');
				$('#header').find('.col-md-10').append($desktopMenu);
				$('.btn-submenu').remove();
			}
		}
	});
	
	$('.btn-raccourcis').on('click', function() {
		$('#secondnav-mobi').slideToggle(300);
		$(this).toggleClass('active');
	});
	
	$('.btn-menu').on('click', function() {
		$('#mainnav-mobi').slideToggle(300);
		$(this).toggleClass('active');
	});

	$(document).on('click', '#mainnav-mobi li .btn-submenu', function(e) {
		$(this).toggleClass('active').next('ul').slideToggle(300);
		e.stopImmediatePropagation()
	});
}`

But :

1- My btn-raccourcis doesn’t work : anything actions. What did I forget ? in which file ?

2- In HTML code, There is for my new button :

<div class="btn-raccourcis"></div>
<nav id="secondnav" class="secondnav" role="navigation">

when there is that for your btn-menu:

<div class="btn-menu active"></div>
<nav style="display: block;" id="mainnav-mobi" class="mainnav" role="navigation">

How can I add :

  • active for my button ?
  • the display: block ?
  • the id -mobi for mobile ?

Thank you in advance for your help.


#2

EDIT :

In header.php, I have that :

<div class="btn-raccourcis"></div>
 <nav id="secondnav" class="secondnav" role="navigation">
 <?php wp_nav_menu( array( 'theme_location' => 'secondary') ); ?>

#3

With this lines of code, it’s ok :

function sydney_child_dequeue_script() {
wp_dequeue_script(‘sydney-main’);
}
add_action( ‘wp_print_scripts’, ‘sydney_child_dequeue_script’, 100 );

add_action( ‘wp_enqueue_scripts’, ‘sydney_child_enqueue’ );
function sydney_child_enqueue() {
wp_enqueue_script( ‘sydney-main-child’, get_stylesheet_directory_uri() . ‘/js/sydney-main-child.js’, array(‘jquery’),’’, true );

Thank you !
}