How to make the Dropdown to open on Hover?

Bootstrap Studio Help
1

Hi+ I know I'm missing something basic here... Right now the dropdown portions of the navigation only open when clicked (to view the sub-navigation tabs) and I would like them to open on hover. Please advise. Thanks!

2

The bootstrap framework does not support mouseover for the navs I think mainly because it's designed with mobile first in mind. Referring to I would think is that the primary device is a touch device. Here is what they say regarding hover on browsers that try to emulate hover. http://getbootstrap.com/getting-started/#support-sticky-hover-mobile

Ok, so for your answer here is a simple way of working with this. http://stackoverflow.com/questions/8878033/how-to-make-twitter-bootstrap-menu-dropdown-on-hover-rather-than-click#8878666

Add this to your CSS.

@media (min-width: 979px) {
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

This does not change the fact that click still makes the nav sticky though, but it does enable hover to expose the dropdown.

Saj

3

Ok. So if you want a JS solution that handles a bit more, here is a plugin that will handle things better https://github.com/CWSpear/bootstrap-hover-dropdown. You just need to import the JS as an external URL which is

https://cdnjs.cloudflare.com/ajax/libs/bootstrap-hover-dropdown/2.2.1/bootstrap-hover-dropdown.min.js

and then also add some code to the link that triggers the dropdown.

So find the link that contains the attribute data-toggle="dropdown" and add the attribute data-hover="dropdown". If you're not sure how to do all that just let me know.

Since JS does not run in the app, you can only test that it works in a preview.

Saj

4

Hi, Saj+

Thank you very much for your quick and detailed responses! I will give them a try and see which way works best for this particular website. Thank you for the links and code as well.

+ES

5

You can also use the shared component MUSA_navbar which already has that feature built in. :)

6

Hi, Jo+ Thank you for the suggestion; where would I find that?

7

Check the Online components section in the top left corner of the app window. You have 2 tabs there at the moment, one for Studio (meaning those that are provided by the app and those that you have saved of your own, and those you have already installed from the Online components). Click the Online and do a search for MUSA and that should give you all the apps they have currently uploaded to share.

8

Thank you very much, Jo!