CODEWITHSUNDEEP
csshtmltwitter-bootstrap
Ramlal S
Ramlal S

Reputation: 1643

How to auto adjust dropdown box in bootstrap navbar not to exceed page width?

On click in dropdown menu, dropdown box is exceeding the width of the page and showing the horizontal scroll.

Help me, How to make the dropdown box auto adjust the position if the right/left side is end of the page without scroll (as shown in figure below)?.

Demo: https://codepen.io/ramlals/pen/RmoGEx

enter image description here

I know it can be avoided by giving margin right to drop down menu but i need box to auto adjust position.The similar questions in stack related to dropdown menu/sizing but not dropdown-box.

My code (bootstrap navbar example)as follows:

 <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <a class="navbar-brand" href="#">Navbar</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                  <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="#">Link</a>
                    </li>
                    <li class="nav-item dropdown">
                      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropdown
                      </a>
                      <div class="dropdown-menu w-100" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Something else here</a>
                      </div>
                    </li>
                  </ul>

                </div>
              </nav>

Thanks in advance.

Upvotes: 1

Views: 1567

Answers (1)

Pradhumn Sharma
Pradhumn Sharma

Reputation: 1959

This is very easy you have already applied position: absolute to that div element. Now just add one more style in same element mentioned below:

left: -60px;

The whole code will look like this

@media (min-width: 992px)
.navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
    left: -60px;
}

This will help.

Upvotes: 2

Related Questions