CODEWITHSUNDEEP
htmlbootstrap-4
n212
n212

Reputation: 607

Boostrap 4 dropdown menu is exceeding the page on the right

I added a dropdown menu to my bootstrap4 navbar, but the dropdown menu exceeds the page by quite a bit (on the right side).

I tried applying a few things I saw on google like adding dropdown-menu-left or drop-left but both haven't worked for me. The only thing that works at the moment is applying margin-right to the element but that's not what I want since it ruins the format of my navbar.

https://i.sstatic.net/qhcOW.jpg

My html

        <!-- right side -->
        <ul class="navbar-nav ml-auto">
          @if (isset($_SESSION['user_data']))
          <!-- Dropdown -->
            <li class="nav-item dropdown" style="right: 0;">
              <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                {{$_SESSION['user_data']->username}}
              </a>
              <div class="dropdown-menu dropleft">
                <a class="dropdown-item" href="{{ url('/servers') }}">Manage servers</a>
                <a class="dropdown-item" href="{{ url('/logout') }}">Logout</a>
              </div>
            </li>
          @else 

          @endif

       </ul>

Upvotes: 0

Views: 113

Answers (1)

Oussama BEN MAHMOUD
Oussama BEN MAHMOUD

Reputation: 1472

Have you tried dropdown-menu-right on your dropdown-menu ?

<div class="dropdown-menu dropdown-menu-right">
    <a class="dropdown-item" href="{{ url('/servers') }}">Manage servers</a>
    <a class="dropdown-item" href="{{ url('/logout') }}">Logout</a>
</div>

Here's a fiddle for that (try to enlarge the preview window if you see the mobile layout).

Is it what you're looking for?

See bootstrap4 documentation for more details on menu alignment

Upvotes: 1

Related Questions