Support » Theme: Twenty Twelve » SubMenu Functionality on Mobile Devices

  • Resolved Chi Is Current

    (@jacobbarnett)


    Twenty Twelve theme: On mobile devices, all menu and submenu items are displayed together, beneath the ‘Menu’ button. How can menu / submenu functionality be achieved on mobile devices (without a plugin)?

    Many Thanks!

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • I had the same problem, and I don’t think it can be done. However, there are plenty of mobile menu plugins that will do the trick.

    Hey @jacobbarnett

    To do that you have to add below css code into Appearance → Customize → Additional CSS:

    .main-navigation ul.nav-menu.toggled-on {
      width: 100%;
      text-align: left;
    }
    .menu-item-has-children a {
      display: block !important;
    }
    
    @media (max-width: 767px) {
      .menu-item-has-children {
        position: relative;
      }
      .main-navigation li ul {
        display: none;
      }
      .menu-item-has-children a {
        display: block !important;
      }
      .menu-item-has-children:after {
        content: ' \02C7';
        position: absolute;
        right: 70px;
        font-size: 20px;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 30px;
        width: 30px;
        cursor: pointer;
      } 
    }

    And add below js into Appearance → Theme Editor → JS → navigation.js.

    jQuery(document).ready(function($){
      if ($(window).width() > 767) {
      }
      else {
        $('.main-navigation li ul').hide();
        $('.menu-item-has-children').has('ul').click(function() {
          $('.menu-item-has-children a').css("display", "block !important");	
          $(this).children().toggle();
        });
      }
    }); 

    Let me know if that does it.
    Thank you.

    Snehal ~

    Your solution is EXCELLENT and works PERFECTLY!!!

    I trust others will find this useful as well as I did a significant amount of searching before I posted.

    MANY THANKS!!!! Jacob

    Snehal ~

    Looking further down the road, how can I apply the js code in navigation.js so it will not be overwritten when the theme updates?

    I notice the child theme does not appear to support a navigation.js file.

    Thank you, Jacob

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.