I am working on a wordpress website using a responsive template with one menu line on top right corner. I added a second menu with social icons by moving it from another location to the top (inside as second in header.php). Now responsive is not working anymore, no toggle, nothing. I assume the problem is that I have two identical id (cssmenu) that cause confusion in the js file, correct? As I am not familiar with js, can someone give me a hint how to change it?
<nav>
<div id="cssmenu">
<?php
get_template_part( 'inc/partials/content', 'header-social');
?>
</div>
<div id="cssmenu">
<?php
global $wp_customize;
if ( !empty( $wp_customize ) && $wp_customize->is_preview() && !get_theme_mod( 'louis_content_set', false ) ) {
?>
<ul>
<li id="menu-item-16"
class="menu-item">
<a href="#">Home</a></li>
<li id="menu-item-17"
class="menu-item">
<a href="http://wplift.com/themes/">More Free Themes</a></li>
<li id="menu-item-21"
class="menu-item">
<a href="#">Blog</a></li>
<li id="menu-item-22"
class="menu-item">
<a href="#">Contact</a></li>
<li id="menu-item-23"
class="menu-item">
<a href="#">Members</a></li>
<li id="menu-item-24"
class="menu-item">
<a href="#">Signup</a></li>
</ul>
<?php
} else {
wp_nav_menu( array(
'theme_location' => 'primary',
'container' => false,
'items_wrap' => '<ul>%3$s</ul>',
'depth' => 0,
'fallback_cb' => 'louis_fallback_menu',
)
);
}
?>
</div>
</nav>
js file:
(function($) {
$.fn.menumaker = function(options) {
var cssmenu = $(this), settings = $.extend({
title: "Menu",
format: "dropdown",
sticky: false
}, options);
return this.each(function() {
cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
$(this).find("#menu-button").on('click', function(){
$(this).toggleClass('menu-opened');
var mainmenu = $(this).next('ul');
if (mainmenu.hasClass('open')) {
mainmenu.hide().removeClass('open');
}
else {
mainmenu.show().addClass('open');
if (settings.format === "dropdown") {
mainmenu.find('ul').show();
}
}
});
cssmenu.find('li ul').parent().addClass('has-sub');
multiTg = function() {
cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
cssmenu.find('.submenu-button').on('click', function() {
$(this).toggleClass('submenu-opened');
if ($(this).siblings('ul').hasClass('open')) {
$(this).siblings('ul').removeClass('open').hide();
}
else {
$(this).siblings('ul').addClass('open').show();
}
});
};
if (settings.format === 'multitoggle') multiTg();
else cssmenu.addClass('dropdown');
if (settings.sticky === true) cssmenu.css('position', 'fixed');
resizeFix = function() {
if ($( window ).width() > 768) {
cssmenu.find('ul').show();
}
if ($(window).width() <= 768) {
cssmenu.find('ul').hide().removeClass('open');
}
};
resizeFix();
return $(window).on('resize', resizeFix);
});
};
})(jQuery);
(function($){
$(document).ready(function(){
$("#cssmenu").menumaker({
title: "Menu",
format: "multitoggle"
});
});
})(jQuery);
The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).
- this has nothing to do with Javascript.