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

As promised I have today changed the coding on all the pages and uploaded. The mobile version appears to be working well when previewing it on shrunken desktop screens yet to go through it on my mobile. However there seems to be a couple of issues on desktop.

  1. If you are viewing on a widescreen nav bar stretched and goes over the edge of the page so the drop down goes over the background - not sure I like that look!
  2. In desktop view the drop down menu goes behind the wording and carousels etc so choices cannot be clicked on as you go down the list.

Can you please have a look and advise.

Liz


Thats just the way the design is. Your page is quite narrow 1000px wide and you have  no padding around the text to allow the content to 'breathe' which doesnt help matters. So naturally a drop-menu will stick outside of the narrow container if the drop-menu is associated with the last link. All these aspects need careful planning at the outset of a project.

To negate 1 and 2 you would need to really set the width of the navigation to a max-width: 1000px, add position: relative; and set a z-index: 1000; on the 'main-naviagtion-wrapper' :

/* main navigation wrapper */

.main-navigation-wrapper {

width: 80%;

margin: 0 auto;

font-family: helvetica, sans-serif;

max-width: 1100px;

position: relative;

z-index: 1000;

}

and then centre the links by updating the 'main-navigation' css (see below) This will then allow for the drop-menu to sit within the content area.

.main-navigation {

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

margin: 0;

padding: 0;

font-size: 18px;

line-height: 28px;

}

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