Bootstrap: Dropdown cutoff

Created on 15 Oct 2012 · 6Comments · Source: twbs/bootstrap

A video of the bug: http://cl.ly/0C2c1c1A0H0b

My code:

<div class="navbar navbar-inverse  navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </a>
            <a class="brand" href="/">CMS</a>

            <div class="nav-collapse collapse">
              <ul class="nav">
                  <li class="divider-vertical"></li>
                  <li><a href="#"><i class="icon-home icon-white"></i> Home</a></li>
              </ul>
              <div class="pull-right">
                <ul class="nav pull-right">
                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Welcome, User <b class="caret"></b></a>
                        <ul class="dropdown-menu">
                            <li><a href="/user/preferences"><i class="icon-cog"></i> Preferences</a></li>
                            <li><a href="/help/support"><i class="icon-envelope"></i> Contact Support</a></li>
                            <li class="divider"></li>
                            <li><a href="/auth/logout"><i class="icon-off"></i> Logout</a></li>
                        </ul>
                    </li>
                </ul>
              </div>
            </div>
        </div>
    </div>
  </div>

Any ideas on how to resolve this.

Source

freshface

Most helpful comment

Hi belogub, here is a simple example http://svn.figure8.be/bootstrap/menu.html

freshface on 16 Oct 2012

🚀1 🎉1 😄1

All 6 comments

You better provide a link to page with broken navigation cause in my case everything is ok

bilogub on 16 Oct 2012

Hi belogub, here is a simple example http://svn.figure8.be/bootstrap/menu.html

freshface on 16 Oct 2012

🚀1 🎉1 😄1

You likely don't have the responsive CSS included, but we cannot help without a jsfiddle.

mdo on 17 Oct 2012

freshface, try to add http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css to <head> block,
this worked for me on your sample page

bilogub on 17 Oct 2012

Is there any way to have dropdowns without adding the responsive.css file? I'd like to have a non-responsive desktop site with dropdowns.

handstandsam on 19 Oct 2012

It is possible, but the css is missing. It looks like the bootstrap.css file needs to have the following css to see dropdowns (in the navbar) without using bootstrap-responsive.css

.nav-collapse.collapse {
height: auto !important;
overflow: visible !important;
}

handstandsam on 19 Oct 2012

Was this page helpful?

0 / 5 - 0 ratings