Mobile sub menus

In the mobile version of ellenrobinson.com, the client would like to set up the main nav menu without the plus signs that lead to sub pages. Instead, she would like to have the sub pages listed, indented underneath the main links.

So for instance instead of:
Calendar +

Could we make it:
Calendar
Performance Archives

Thanks.

Hello there,

I would like to apologize in advance for responding slowly.

In order to achieve that objective, could you please try to do the following?

  1. Install and activate the Header and Footer Scripts plugin. Go to Settings > Header and Footer Scripts.

  2. In the “Scripts in footer”, add the following jQuery code.

<script>
(function($){
      
    "use strict";
    
    jQuery(window).load(function () {
    
      var $parentMenu = $('.menu-item-has-children > a');

      $( $parentMenu ).each(function(index) {

          var $menuText = $(this).children('a').text();

          $(this).children('.slicknav_arrow').remove();
          $(this).children('a').replaceWith( '<span>'+$menuText+'</span>' );
          
          $(this).on('click', function(e){

            $(this).next('.sub-menu').slideToggle();
            
            return false;    
            
          });
          
      });    
      
    });

 
})(jQuery);
</script>
  1. Save settings

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Warmest regards,
Kharis

Hi Kharis,

That script does half of what we wanted. It took out the plus signs, but we still have to click/touch the parent menu item to make the child ones appear. Client would like the child ones to always be visible. Is that possible?

Thanks.

Hello there,

Could you please just delete the previous code, then add the following CSS code through the Simple Custom CSS plugin?

.mobile-nav .sub-menu{
  display: block !important;
}

.slicknav_nav .slicknav_arrow{
  display: none;
}

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Warmest regards,
Kharis