Clever Geek Handbook

Bootstrap Twitter Dropdown Width

Here's what I want to do: https://docs.google.com/file/d/0B13W1jkpc_BzLXZ6RGxGbUd2NG8/edit?usp=sharing

Here's the CSS for my approach:

@media (min-width: 980px) {
.dropdown-menu .sub-menu {
  left: 100%;
  position: absolute;
  top: 0;
  visibility: hidden;
  margin-top: -1px;
}
ul.nav li.dropdown:hover > ul.dropdown-menu {
  display: block;
}
a.menu:after, .dropdown-toggle:after {
  content: none;
}
.navbar .dropdown-menu {
  margin-top: 0px;
  text-align: center;
}}

And what it looks like now: https://docs.google.com/file/d/0B13W1jkpc_BzZUlRck5VcWh0TkE/edit?usp=sharing

Everything works fine except that I cannot get the correct width for the dropdown (I need to reduce the width to fit the text). So how do I go about doing this?

+3


source to share


3 answers


You need to remove the property min-width

in the list .dropdown-menu

. By including the following after , you include bootstrap:

.dropdown-menu {
  min-width: 0px;
}


Alternatively, for the exact style you specified, you can use tooltips instead of

+13


source


Try removing the padding from the .dropdown-menu.sub-menu classes.



.dropdown-menu .sub-menu {
  left: 100%;
  position: absolute;
  top: 0;
  visibility: hidden;
  margin-top: -1px;
  padding: 0;
}
0


source


Well, you can add space to your inner text and it will automatically increase its width, for example you "- Browse by category -"

Add spaces with & nbsp as much as you like, for example

& nbsp - Browse by Category -

0


source






More articles:


All Articles