Support » Plugin: ShiftNav - Responsive Mobile Menu » Bootstrap modal not opening on quick tap

  • Resolved Jtree5757


    Hey guys,
    (shift nav only shown when less than 768px)

    I have my contact menu item set up to open a bootstrap modal, but it doesn’t open when it is quickly tapped (on iphone 4 ios 7.1)

    It works if you “firmly” tap it.

    I added the needed html to the link of the menu item by doing:
    $('.caffeinecontact>a').attr({"data-toggle": "modal", "data-target": "#myModal"});

    And I made the menu close when tapping on it by doing:

    $('.shiftnav-nav #menu-item-38').on("click touchend", function() {

    after line 188 in the shift nav core JS

    So is there a way to get either the modal to open with just the quick tap
    not close the menu unless it was a “firm” tap (I tried doing this by specifying “touchend”)

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Author sevenspark


    Hi Josh,

    It’s actually Bootstrap, not ShiftNav, that will be responsible for opening that modal.

    I took a look at the Bootstrap Modal JS, and it seems like the issue is that the events are click-based (rather than optimized for touch).

    What may be happening is that on a tap, iOS only fires the hover emulation event, rather than the full click event. I think iOS does some special stuff to determine if there are any :hover states or events (since there isn’t any actual “hover” on a touch screen), and if so, prevents the click from firing before that hover event is triggered. This is how it allows CSS hover-based flyout menus to work, for instance.

    One thing to try would be to disable any :hover states on the menu. For example, try disabling the “Highlight Targets on Hover” and “Highlight Targets on Active” settings in ShiftNav to see if that helps iOS process the click immediately.

    (Just a heads-up, my responses may be delayed a bit this week as I am currently traveling)

    Hope that helps!


    Hey Chris! Hope you are enjoying your vacation. No worries on delayed responses, awesome support as always.

    I thought the same thing originally and spent some time trying to optimize it for touch but couldn’t get it.

    I forgot to mention the reason I think it is shiftnav.
    The settings icon is set up the same way, but the only difference is that it is not a menu item and not in a shiftnav DOM element (no shiftnav on that site).

    The modal opens just fine on tap.

    But anyways I found a workaround and probably the better way to go about it. I replaced the code I inserted into the shiftnav js to :

    $('.shiftnav-nav #menu-item-38').on("click touchend", function() {
            $('#myModal').on('', function(){

    It seems to work better than using shown seems to work better than show.

    Now the issue is that when the modal opens it is constrained to the shiftnav-wrap (which nearly all content is now in/ child of)
    But after I scroll it looks fine. (Again, on iphone only, works fine on ipad and desktop)

    see pic:

    Any ideas on what is causing this?

    Hey Chris, never mind. It’s a theme issue. Using enfold and it seems to be color sections an possibly other containers causing it. I’ll sort it out with them.

    Thanks again for your help!

    Plugin Author sevenspark


    Great, thanks for letting me know, Josh – glad to hear you got it sorted out! 🙂



Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Bootstrap modal not opening on quick tap’ is closed to new replies.