CODEWITHSUNDEEP
csstwitter-bootstrapdrop-down-menu
Line in Linus
Line in Linus

Reputation: 420

Center dropdown menu on screen

How do i center the dropdown menu on the screen (small screens in particular).

enter image description here

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown link
  </a>

  <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <a class="dropdown-item" href="#">Action</a>
    <a class="dropdown-item" href="#">Another action</a>
    <a class="dropdown-item" href="#">Something else here</a>
  </div>
</div>

I have tried to add position:absolute, left:0 etc. however without any luck..

Upvotes: 0

Views: 384

Answers (2)

R_D
R_D

Reputation: 24

You can use transform:

Example:

.dropdown-menu {
  left: 50%;
  right: auto;
  text-align: center;
  transform: translate(-50%, 0);
}

If you need more info, you can read more about it on the CSS-tricks

Upvotes: 1

Johannes
Johannes

Reputation: 67778

In this case (in a media query) you can use position: fixed, an appropriate top value (equal to the height of the navbar), and for the horizontal centering left: 50% and transform: translateX(-50%);

Upvotes: 0

Related Questions