Full width dropdown menu
11,037
put this css
might help
/* CSS used here will be applied after bootstrap.css */
.nav { margin-bottom: 0; }
.nav > li.dropdown.open { position: static; }
.nav > li.dropdown.open .dropdown-menu {display:block; width: 100%; }
.dropdown-menu>li { display: block; }
Author by
Tom
Updated on September 11, 2022Comments
-
Tom over 1 year
I have a dropdown menu, that when opened I need it to stretch the full length of the container, i'm using twitter bootstrap, currently it sits like in the image
Here is the html
<ul id="multicol-menu" class="nav navbar-nav pull-right"> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Stay Connected </a> <ul class="dropdown-menu"> <div clas="row"> <li> <div class="row"> <ul class="list-unstyled col-md-2"> <p class="submenu-title">TITLE</p> <li><a href="#">test1-1</a></li> <li><a href="#">test1-2</a></li> <li><a href="#">test1-3</a></li> </ul> <ul class="list-unstyled col-md-2"> <p class="submenu-title">TITLE</p> <li><a href="#">test2-1</a></li> <li><a href="#">test2-2</a></li> <li><a href="#">test2-3</a></li> </ul> <ul class="list-unstyled col-md-2"> <p class="submenu-title">TITLE</p> <li><a href="#">test3-1</a></li> <li><a href="#">test3-2</a></li> <li><a href="#">test3-3</a></li> </ul> <ul class="list-unstyled col-md-2"> <p class="submenu-title">TITLE</p> <li><a href="#">test3-1</a></li> <li><a href="#">test3-2</a></li> <li><a href="#">test3-3</a></li> </ul> <ul class="list-unstyled col-md-4"> <a href="#myModal" role="button" data-toggle="modal"> <img src="img/book-now-block.png" /> </a> </ul> </div> </li> </div> </ul> </li>