├── mobile.png ├── desktop.png ├── css └── bootstrap-4-navbar.css ├── README.md ├── js └── bootstrap-4-navbar.js └── index.html /mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/natanfelles/bootstrap-4-multi-dropdown-navbar/master/mobile.png -------------------------------------------------------------------------------- /desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/natanfelles/bootstrap-4-multi-dropdown-navbar/master/desktop.png -------------------------------------------------------------------------------- /css/bootstrap-4-navbar.css: -------------------------------------------------------------------------------- 1 | /*//Copy this css*/ 2 | .navbar-light .navbar-nav .nav-link { 3 | color: rgb(64, 64, 64); 4 | } 5 | .btco-menu li > a { 6 | padding: 10px 15px; 7 | color: #000; 8 | 9 | } 10 | 11 | .btco-menu .active a:focus, 12 | .btco-menu li a:focus , 13 | .navbar > .show > a:focus{ 14 | background: transparent; 15 | outline: 0; 16 | } 17 | 18 | 19 | .dropdown-menu .show > .dropdown-toggle::after{ 20 | transform: rotate(-90deg); 21 | } 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Bootstrap 4 Responsive Navbar with Multi level Dropdowns 2 | ========================== 3 | 4 | 5 | Tested on Bootstrap 4.0.0-alpha.6 and jQuery v3.1.1. Check this [Demo](https://bootstrapthemes.co/demo/resource/bootstrap-4-multi-dropdown-navbar/) 6 | 7 | 8 | ## In Desktop 9 | ![desktop](https://raw.githubusercontent.com/bootstrapthemesco/bootstrap-4-multi-dropdown-navbar/master/desktop.png) 10 | 11 | 12 | ## Mobile device 13 | ![mobile](https://raw.githubusercontent.com/bootstrapthemesco/bootstrap-4-multi-dropdown-navbar/master/mobile.png) 14 | 15 | 16 | ========================== 17 | 18 |

Usage

19 | 20 | 1. Add css header for caret right icon `````` 21 | 2. Add js for navbar events after include jquery and bootstrap js files `````` 22 | 23 | 24 | 25 | Credits: fontenele 26 | -------------------------------------------------------------------------------- /js/bootstrap-4-navbar.js: -------------------------------------------------------------------------------- 1 | 2 | /*! 3 | * Bootstrap 4 multi dropdown navbar ( https://bootstrapthemes.co/demo/resource/bootstrap-4-multi-dropdown-navbar/ ) 4 | * Copyright 2017. 5 | * Licensed under the GPL license 6 | */ 7 | 8 | 9 | $( document ).ready( function () { 10 | $( '.dropdown-menu a.dropdown-toggle' ).on( 'click', function ( e ) { 11 | var $el = $( this ); 12 | var $parent = $( this ).offsetParent( ".dropdown-menu" ); 13 | if ( !$( this ).next().hasClass( 'show' ) ) { 14 | $( this ).parents( '.dropdown-menu' ).first().find( '.show' ).removeClass( "show" ); 15 | } 16 | var $subMenu = $( this ).next( ".dropdown-menu" ); 17 | $subMenu.toggleClass( 'show' ); 18 | 19 | $( this ).parent( "li" ).toggleClass( 'show' ); 20 | 21 | $( this ).parents( 'li.nav-item.dropdown.show' ).on( 'hidden.bs.dropdown', function ( e ) { 22 | $( '.dropdown-menu .show' ).removeClass( "show" ); 23 | } ); 24 | 25 | if ( !$parent.parent().hasClass( 'navbar-nav' ) ) { 26 | $el.next().css( { "top": $el[0].offsetTop, "left": $parent.outerWidth() - 4 } ); 27 | } 28 | 29 | return false; 30 | } ); 31 | } ); -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Bootstrap NavBar 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 24 | 25 | 26 | 27 | 28 | 29 |
30 | 31 | 32 | 100 | 101 | 102 |
103 |

Bootstrap 4 multi dropdown navbar

104 |

This example of bootstrap 4 navigation with multi dropdown menu.

105 |

106 | Live Demo 107 | Download from Github 108 | hover version 109 |

110 |
111 | 112 |
113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | --------------------------------------------------------------------------------