CODEWITHSUNDEEP
bootstrap-4
John Higgins
John Higgins

Reputation: 39

Bootstrap Navbar Dropdown Goes Off Screen

I'm using bootstrap 4. My header is Navbar and I have a dropdown button at the end. The list drops down but the words go off page and cannot be read. How do I resolve this, please?

Please see https://dreamwebdesigns.co.uk

Upvotes: 0

Views: 542

Answers (2)

Stella Tsich
Stella Tsich

Reputation: 39

*Update: In Bootstrap 5 use dropdown-menu-end, instead of dropdown-menu-right:

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="dropdownMenuButton1">
    ...
  </ul>
</div>

Upvotes: 1

Yunus Erdem Sıhhatlı
Yunus Erdem Sıhhatlı

Reputation: 23

Change your dropdown-menu div:

<div class="dropdown-menu" aria-labelledby="navbarDropdown">

to:

<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">

Upvotes: 1

Related Questions