• Hi everyone,
    I am trying to modify the Mobile toggle menu for the Twenty Fifteen theme so that the toggle affects #site-navigation instead of #secondary. Im pretty sure I have to modify this in the functions.js. I’m not exactly sure how to do this but this is the javascript

    // Enable menu toggle for small screens.
     ( function() {
      var secondary = $( '#secondary' ), button, menu, widgets, social;
      if ( ! secondary ) {
       return;
      }
    
      button = $( '.site-branding' ).find( '.secondary-toggle' );
      if ( ! button ) {
       return;
      }
    
      // Hide button if there are no widgets and the menus are missing or empty.
      menu    = secondary.find( '.nav-menu' );
      widgets = secondary.find( '#widget-area' );
      social  = secondary.find( '#social-navigation' );
      if ( ! widgets.length && ! social.length && ( ! menu || ! menu.children().length ) ) {
       button.hide();
       return;
      }
    
      button.on( 'click.twentyfifteen', function() {
       secondary.toggleClass( 'toggled-on' );
       secondary.trigger( 'resize' );
       $( this ).toggleClass( 'toggled-on' );
      } );
     } )();

    I’m not fluent in Javascript but this is what I have so far.

    // Enable menu toggle for small screens.
     ( function() {
      var sitenav = $( '#site-navigation' )/*, button, menu, widgets, social*/;
      if ( ! sitenav ) {
       return;
      }
    
      button = $( '.site-branding' ).find( '.secondary-toggle' );
      if ( ! button ) {
       return;
      }
    
      // Hide button if there are no widgets and the menus are missing or empty.
      /*menu    = secondary.find( '.nav-menu' );
      widgets = secondary.find( '#widget-area' );
      nav  = secondary.find( '#site-navigation' );
      social  = secondary.find( '#social-navigation' );
      if ( ! widgets.length && ! social.length && ( ! menu || ! menu.children().length ) ) {
       button.hide();
       return;
      }*/
    
      button.on( 'click.twentyfifteen', function() {
       sitenav.toggleClass( 'toggled-on' );
       sitenav.trigger( 'resize' );
       $( this ).toggleClass( 'toggled-on' );
      } );
     } )();

    I am using a child theme and I know how to remove the old function and add my new function in the functions.php. I am just having trouble with this part specifically. I would appreciate any help concerning this.

    p.s my current code results in a nonfunctional button. 🙁

    Thanks in advance

The topic ‘Twenty Fifteen Toggle Mobile Menu’ is closed to new replies.