So we need to add change the following lines of code to resolve that issue approximately lines The final step is going to be to adjust the menu when we create it in our header. There was an issue with menus not closing if no option was selected. We needed to keep the menu open while the levels are navigated.
The problem with a multi-level menu is that the open class is getting removed when you proceed to another level thus making the entire menu disappear. The open class is what keeps that dropdown menu visible when selecting an item. You will note that we commented out the last line of the function. We therefore have set the state to active in this solution. While this works great on the desktop, unfortunately hover events do not work as wonderfully on mobile devices. It is important to note in the above CSS, that many of the solutions out there set the. After endless Google searches and hacking around in the Bootstrap 3. While the workarounds work great for desktops, laptops, and even some tablets, they fail to work for all mobile devices. While there is many articles providing workarounds through CSS to achieve desired results, one critical piece that is missing from the puzzle is responsive support. While the Bootstrap developers argued that the need for multi-level was minimal at best, the fact remained that removing them from the core product left many web developers out in the cold. Like this: Like LoadingWhen Twitter Bootstrap 3 was released one element that was missing was support for multi-level dropdown menus. Latest posts by Jeff Mould see all Laravel 5. Read more about Jeff Mould or follow him on Twitter. Jeff Mould blogs about programming and technology in general. Jeff Mould is a social entrepreneur living in Delaware. For discounted hosting services visit Bluehost. Note: Improve your site performance and receive phenomenal support at the same time. I should note as well that the wp-bootstrap-navwalker. This allows us to have 3 levels of menus. You will note that we changed the depth to whatever depth we want, in this case 3. Bootstrap 4 Navbar Concepts - BOOTSTRAP 4 TUTORIAL EDIT: Had to add a second function that duplicated the original function to resolve issue with menus not closing if no option was selected. I did not take the time to minimize the bootstrap. I have also uploaded all the files to my GitHub. When Twitter Bootstrap 3 was released one element that was missing was support for multi-level dropdown menus. I have corrected these errors in a new blog post. There were a couple errors in the instructions and code below.
0 kommentar(er)
