Fix to the SUB-MENU problem on MOBILE DEVICES: Revisted

This problem was resolved on the forum. This write up is just to clarify the steps required to get the Menu to display correctly and not open all of the sub menus on mobile devices using a Twenty Twelve Child theme.

First of all create and use a child theme. This will prevent future theme updates from over writing the modifications to the theme.

Here is topic on how to create a Child Theme.

Open the style.css of the child theme with an editor such as Notepad++ and paste in the code below provided by Dev1.addweb
(@snehalb890)

.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;
  } 
}

Next, if you don’t have one, create a folder in your child theme called js.

Use the Notepad++ editor to create a file called navigation.js in this folder and paste the following code again provided by Dev1.addweb
(@snehalb890)

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();
    });
  }

Thanks also go to (@Chi Is Current) and (@jacobbarnett)