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

Measha06
Measha06Author
Known Participant
June 26, 2017

Measha06  wrote

I noticed you have used 960 as max width do you have a reasoning behind this as I was thinking mobiles were below 761?

I tend to look at when the desktop menu starts to break down and that happens in fact just before 960px. Since we dont really know who is viewing on what device and at what window width I think its always best to start re-arranging elements when they begin to fall apart, rather than at set media breaks.


Thanks for the explanation. So you would only go for two sections so to speak, Desktop and below 960? Do you do anything separate for print?

Liz

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