Bootstrap Nav Items right problem with Dropdown

Question

I am using Bootstrap to create a Navbar. When I click on the dropdown the items in the dropdown are placed outside of the window. but they increase the window. I put ml-auto in to show the items on the right side.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  </head>
  <body>
    <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">AR PhotoArt</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="#">LebensArt <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">ArbeitsArt</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">LichtArt</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">
          Mehr
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Anleitung</a>
          <a class="dropdown-item" href="#">Wettbewerb</a>
          <a class="dropdown-item" href="#">Kurs</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Kontakt</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

    <!-- jQuery first, then Tether, then Bootstrap JS. -->
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

score 3 · Accepted Answer · answered Feb 24 '20 at 14:10

You need to add dropdown-menu-right to your dropdown-menu, example here

So this

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

Would become this

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

edit

@flakerimi posted this just before me, but both are the same FYI.

score 1 · Answer 2 · answered Feb 24 '20 at 14:08

1

Use dropdown-menu-right in

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

Here is the fiddle

https://jsfiddle.net/9hL6soq2/

answered Feb 24 '20 at 14:08

flakerimi

2,580
3
29
49

@UdisKlorenz accept answer if it helped. – flakerimi Feb 27 '20 at 13:31

score 1 · Answer 3 · edited Jun 20 '20 at 09:12

1

Wrap <div class="collapse navbar-collapse" id="navbarSupportedContent"> with a <div class="container"> and close it after <div class="collapse"> ends.

or

You can add dropdown-menu-right class to the div with class dropdown-menu.

Check code here: https://codepen.io/manaskhandelwal1/pen/GRJrWLX

edited Jun 20 '20 at 09:12

Community

1
1

answered Feb 24 '20 at 14:08

Manas Khandelwal

3,790
2
11
24

You can use either method to do so. If you want some spacing then use `container` class method. Whereas if you want no spacing the use the `dropdown-menu-right` class method. – Manas Khandelwal Feb 24 '20 at 15:07

Bootstrap Nav Items right problem with Dropdown

3 Answers3

or