1

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);
3
  • 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. Commented Aug 5, 2016 at 9:46
  • Ok. I assumed because it asked several times for cssmenu or #cssmenu in the js file. The social Menü had this id also before in the original php file, but it was not within the <nav>.
    – Monika
    Commented Aug 7, 2016 at 11:13
  • So what may disrupt my responsive?
    – Monika
    Commented Aug 7, 2016 at 11:14

0

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.