Timeline for How to make Twitter Bootstrap menu dropdown on hover rather than click
Current License: CC BY-SA 3.0
32 events
| when toggle format | what | by | license | comment | |
|---|---|---|---|---|---|
| Mar 2, 2018 at 16:49 | comment | added | James Bailey | In Bootstrap 4 it has changed, the proper code is div.dropdown instead of ul.dropdown for example: @media (min-width: 992px) { ul.nav li.dropdown:hover > div.dropdown-menu { display: block; } } | |
| Feb 17, 2018 at 6:35 | comment | added | Dave de Jong | This doesn't work well on touch/mobile devices. After clicking the menu the menu indeed opens, but you cannot click the menu again to close it. You have to tap somewhere else in the screen to close it, which, on Chrome-iOS at least, causes a flickering effect. | |
| May 9, 2017 at 14:42 | comment | added | v1shnu |
I've added this solution to my website, however scrollspy is not working now. Can anyone help me with that ? stackoverflow.com/questions/43853814/…
|
|
| May 6, 2016 at 17:41 | comment | added | Joansy | I think it's important that you bring up that this is not recommended on small screens. On a smartphone, a user would not be able to trigger the hover event because they can't hover with their finger. | |
| Jul 6, 2015 at 21:08 | comment | added | My Head Hurts | @wutzebaer - In general, if you come across an issue it is better to open a new question as it will help other visitors and will more likely get your question answered. The code you linked to uses a javascript solution rather than a CSS based solution, which means it is unlikely to share behaviours with this solution. In fact, from quickly looking at the code in the linked example, the problem looks to be in the way the author uses the toggle function. | |
| Jul 6, 2015 at 20:47 | comment | added | wutzebaer | @My Head Hurts found this which looks like the same problem: bootsnipp.com/snippets/featured/… | |
| Jul 6, 2015 at 20:43 | comment | added | wutzebaer | @ejain - i have the same problem, did you find the cause? | |
| Jun 29, 2015 at 16:09 | comment | added | duyn9uyen | I added this css class to make the menu item have a hover over color. .navbar-nav > li.dropdown:hover { background-color: gray ; } | |
| Apr 22, 2015 at 19:28 | history | edited | Travis | CC BY-SA 3.0 |
Added @KurtWM's suggestion for making this work with a collapsed navbar
|
| May 14, 2014 at 11:54 | review | Suggested edits | |||
| May 14, 2014 at 11:57 | |||||
| Nov 5, 2013 at 12:24 | history | edited | My Head Hurts | CC BY-SA 3.0 |
slightly re-worded Twitter Bootstrap version numbers
|
| Oct 18, 2013 at 18:17 | comment | added | ejain | @My Head Hurts - you're right, I'm unable to reproduce this in a simple example. | |
| Oct 18, 2013 at 8:26 | comment | added | My Head Hurts | @ejain - that sounds like something caused by Javascript. Could you put together a JSFiddle reporducing the issue and I will take a look | |
| Oct 18, 2013 at 5:42 | comment | added | ejain | One small issue with this solution is that the dropdown menu stays open after clicking on a menu item (until the cursor is moved). | |
| Aug 28, 2013 at 21:40 | comment | added | Pherrymason |
@Krunal to be able to click the link, you must remove the data-toggle="dropdown" attribute.
|
|
| Aug 25, 2013 at 14:40 | comment | added | My Head Hurts | @CharlesHamel can you add a JSFiddle demostrating the code "not working" (with an explanation of what is happening and what you are expecting to happen) and I will take a look. I have had a quick look at the CSS classes in Bootstrap 3.0 and they look to be the same - the only change is the way the caret is displayed so I have updated my answer to reflect this! | |
| Aug 25, 2013 at 14:40 | history | edited | My Head Hurts | CC BY-SA 3.0 |
added way to remove caret in Bootstrap 3.0 and removed fiddle as we can no longer hotlink to Twitter Bootstrap
|
| S Aug 9, 2013 at 15:49 | history | suggested | Hemerson Varela | CC BY-SA 3.0 |
Added Syntax highlighting for css code
|
| Aug 9, 2013 at 15:46 | review | Suggested edits | |||
| S Aug 9, 2013 at 15:49 | |||||
| Jun 7, 2013 at 15:37 | comment | added | KurtWM | Opening the dropdown on hover seems awkward a collapsing responsive navbar is in the collapsed state. Enclosing the CSS suggested by MyHeadHurts within a media query that only allows the rule when the width of the window is greater than the width required before the navigation collapses seems to help. /* Make dropdowns activate on hover except when navigation is collapsed by max-width */ @media (min-width: 979px) { ul.nav li.dropdown:hover > ul.dropdown-menu { display: block; } } | |
| Jun 6, 2013 at 10:00 | comment | added | Joko Wandiro | @Krunal Use this jquery plugin for Bootstrap NavBar support hover on specific screen size and clickable on specific screen size. | |
| Apr 3, 2013 at 20:09 | comment | added | My Head Hurts | @ArchimedesTrajano the first comment by SalmanPK shows the solution to fix this. If this does not resolve the problem then let me know and I will revisit the answer as Twitter Bootstrap is always being updated | |
| Apr 3, 2013 at 18:41 | comment | added | Archimedes Trajano | There is a problem with this approach in that there is a slight gap between the dropdown menu and the actual menu item so if you move slowly it will close the cover | |
| Jan 31, 2013 at 13:35 | history | edited | My Head Hurts | CC BY-SA 3.0 |
as mentioned in a rejected edit by @CocaAkat we needed an > selector to stop nested menus being shown
|
| Jan 31, 2013 at 10:07 | review | Suggested edits | |||
| Jan 31, 2013 at 10:14 | |||||
| Dec 14, 2012 at 7:59 | comment | added | My Head Hurts | @DDL449 I don't think it is possible for mods to accept answers on behalf of other people. Luckily the voting system in StackOverflow is a good way to show what the good answers are - which also works well when answers (which are not always the best) are marked as the accepted answer. | |
| Oct 2, 2012 at 8:44 | comment | added | Bala Clark | For bootstrap 2.1 the first css selector should now be: ul.nav li.dropdown-toggle:hover ul.dropdown-menu { display: block; } | |
| Sep 25, 2012 at 18:09 | comment | added | Nathan Osman | @MyHeadHurts: After some further research - turns out this was indeed a Bootstrap bug and it was only fixed five days ago. | |
| Sep 25, 2012 at 6:42 | comment | added | My Head Hurts | Note: Yes it does - this will work in any browser that twitter bootstrap supports. @GeorgeEdison This is basic CSS - what part would not be supported by IE8? If you are having problems, post a question, not misleading comments. | |
| Sep 14, 2012 at 12:46 | comment | added | Krunal | Simple solution, but the parent link is still not clickable. I'm using latest bootstrap with roots theme. | |
| Aug 18, 2012 at 18:46 | comment | added | Celmaun |
Also had to add margin: 0;, otherwise the 1px margin above .dropdown-menu causes buggy behavior.
|
|
| Jan 16, 2012 at 10:26 | history | answered | My Head Hurts | CC BY-SA 3.0 |