Skip to main content
Measha06
Measha06
Known Participant
June 23, 2017
Answered

Drop Down Sub Menu Not Working on Mobile

  • June 23, 2017
  • 1 reply
  • 12996 views

I have everything in place for my drop down sub-menu which works in testing on shrunken screen but will not work on my HTC One when I check it now we have gone live! I am guessing that the issue to hand is that once you have pressed the hamburger to expand the menu down it goes about half way down the screen with clickables and the last choice you get is the celebration drop down menu, click on this and the menu does drop down to the final choice being the 'Make Your Choice' as the very bottom item (which is the very bottom of my screen, now when you click on that (tap) instead of opening the further choices up it closes the choices down to top drop down menu i.e. celebration stationery option. I am guessing this is because the second drop down has no where to go as there is no screen left under the 'Make Your Choice'.

This is obviously not acceptable as it makes a large percentage of the site not available to mobile viewing. Does anybody have any suggestions for fixing this issue? There is still another page to go under Font Choices in the sub menu drop down.

In-case you want to check this out for yourself on your mobiles then please go to AD Design & Print. I would appreciate help with this as the site is now live with all pages passing WC3 validation.apart from Contact-us that has an 'error' in the embedding code supplied by Google for the map.

This topic has been closed for replies.
Correct answer osgood_

Try including the below script after the link to your Bootstrap js file at the foot of your page. That should stop the default toggle collapsing all open states.

<script>

$(document).ready(function(){

  $('.dropdown-submenu a').on("click", function(e){

    $(this).next('ul').toggle();

    e.stopPropagation();

    e.preventDefault();

  });

});

</script>

1 reply

O
osgood_
Brainiac
June 23, 2017

Measha06  wrote

I am guessing this is because the second drop down has no where to go as there is no screen left under the 'Make Your Choice'.

No, its not. It's because Bootstrap is toggling the 'open states' and closing all the open states.

I don't know how Bootstrap toggle works (and dont really want to) so you will have to wait for someone who does and can give you some advice, the submenu probably needs a bit of onclick javascript of its own to work correctly.

Measha06
Measha06Author
Known Participant
June 23, 2017

Thanks for input

O
osgood_
Brainiac
June 27, 2017

That is much better many thanks I am just fixing the positioning of nav bar now as it is naturally showing with a band above it. Ive put a margin in of -10px which removes the gap but is this the best way to do it?


Im not at my computer right  now but you should not have to give the navigation a negative margin to get it to sit at the top of the page. If there is a gap then its something else that is causing the gap. I will have a look later.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices