-3

I found multiple scripts that apply a slidedown/up effect to a Bootstrap 3 dropdown, but none of them work for me when the screen is smaller (XS/Mobile).

This thread has various options I've tried without success.

All the options I try do not function properly on mobile devices because of the nav-collapse below 768px width. It seems to mix up the function with the bs collapse function and my dropdown mobile styles.

Ideally I would like the dropdown to trigger on hover for desktop and on click for devices but both with a nice slide effect.

Can anyone help please!

Community
  • 1
  • 1
Steve Joiner
  • 493
  • 2
  • 9
  • 21
  • As a rephrase: The dropdown does not work properly on mobile devices, you want it to trigger on hover on the desktop and on click on mobile. Correct? – serv-inc Aug 18 '15 at 11:58
  • yes correct. I have the hover and click working in most for tablet and desktop, but in mobile view ( below 768px ) it combines the slide dropdown on hover as well as keeping the collapsed nav that activates on click. – Steve Joiner Aug 18 '15 at 12:09
  • So why not check if `screen.width > 767`, then use the one solution, else the other? – serv-inc Aug 18 '15 at 12:19
  • to correct my previous post. I stated - "but in mobile view ( below 768px ) it combines the slide dropdown on hover.." This is incorrect as it obviously can't apply effect on hover in mobile. I meant it applies a dropdown on top of the collapsed nav if this makes sense. – Steve Joiner Aug 18 '15 at 12:29
  • Thanks for your response but how do I write what you are suggesting? – Steve Joiner Aug 18 '15 at 12:29
  • I am currently testing this script. `$('.navbar .dropdown').hover(function() { $(this).find('.dropdown-menu').first().stop(true, true).slideDown(); }, function() { $(this).find('.dropdown-menu').first().stop(true, true).slideUp(); });` – Steve Joiner Aug 18 '15 at 12:35

2 Answers2

1

Distinguishing between mobile and desktop via screen.width might do the trick. In one case, use .hover, else .click.

if ( screen.width > 767 ) { // desktop
    $('.navbar .dropdown').hover(function() { 
         $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
    }, function() { 
         $(this).find('.dropdown-menu').first().stop(true, true).slideUp(); 
    });
} else { // mobile
    $('.navbar .dropdown').click(function() { 
         $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
    }, function() { 
         $(this).find('.dropdown-menu').first().stop(true, true).slideUp(); 
    });
}

This code could be more elegant, f.ex. by deduplicating the if-else via using hover and click as parameters.

Maybe the idea is more clear here.

Nowadays, distinguishing via features (f.ex. screen.width) is superior to distinguishing via browsers or mobile/desktop.

Community
  • 1
  • 1
serv-inc
  • 35,772
  • 9
  • 166
  • 188
  • Many thanks for your efforts but this does not seem to solve the issue. It works fine above 767px but still the same issue with below 767px. – Steve Joiner Aug 18 '15 at 13:27
  • @SteveJoiner: does the above `//mobile` code trigger on below 767? (use `console.log` if you can access it, else `alert`) – serv-inc Aug 18 '15 at 14:09
0

To correct the effects on mobile, you could try to add this CSS and tell me if that works? This was a temporary fix on older Bootstrap.

.dropdown-backdrop {
    position: static;
}

You can also apply different styling on mobile/desktop with media queries like so (this is just an example of how to use the media queries, you can replace with what you need):

@media screen and (min-width: 768px) {
  .dropdown:hover>.dropdown-menu {
    display: block;
  }
}
David Gourde
  • 3,709
  • 2
  • 31
  • 65