CODEWITHSUNDEEP
twitter-bootstraptwitter-bootstrap-3
Amjad
Amjad

Reputation: 92

Bootstrap drop down menu extends beyond the screen's width

Please take a look at this Link http://jsfiddle.net/bw7k3yee/ Click on where it says "Click Here Please" and notice how the sub-menu extends to the left of the screen.

How Can I fix that please?

Here is the HTML code as well:

<div class="navbar navbar-static-top navbar-inverse" style="background-color:purple; margin-top:0px;">
     <div class=" container">


         <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeadCollapse">
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
         </button>


         <div class= "collapse navbar-collapse navHeadCollapse">


            <ul class= "nav navbar-nav navbar-right">

                <li class="dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:white">Click Here Please<b class="caret"></b></a> 
                    <ul class="dropdown-menu">
                        <li><a href="http://twitter.com">This Sub Menu floats extends beyond the width of the screen</a></li>
                        <li><a href="http://twitter.com">This Sub Menu floats extends beyond the width of the screen </a></li>
                    </ul>
                </li>


                <li class="dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:white">Menu2 Menu2 Menu2<b class="caret"></b></a>
                    <ul class="dropdown-menu">

                    </ul>
                </li>


                <li class="dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:white">Menu2<b class="caret"></b></a>
                    <ul class="dropdown-menu">

                    </ul>
                </li>



                <li class="dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:white">Menu 5<b class="caret"></b></a>
                    <ul class="dropdown-menu">

                    </ul>
                </li>

                <li class="dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:white">Menu 7<b class="caret"></b></a>
                    <ul class="dropdown-menu">

                    </ul>
                </li>


                <li class="dropdown">

                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:white">Menu 9<b class="caret"></b></a>
                    <ul class="dropdown-menu">

                    </ul>
                </li>


             <li class="dropdown">

                 <a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color:white">Menu 10<b class="caret"></b></a>
                 <ul class="dropdown-menu">

                 </ul>
             </li>   
            </ul>
         </div>

     </div>
     <!-- This creates the login bar on top -->
</div>

Upvotes: 1

Views: 1879

Answers (1)

crazymatt
crazymatt

Reputation: 3286

Ok basically what you will need to do is add the .dropdown-menu-right to your menus that are over running on the right hand side. See what I did you on the updated js.fiddle

Upvotes: 4

Related Questions