CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Ma Kobi
Ma Kobi

Reputation: 904

Bootstrap 4 navbar dropdown height is different

I'm using a bootstrap navbar with a dropdown for the user menu.

The issue

I'm using this navbar as a blade template in laravel. On some pages the dropdown menu has the dimensions 160x63.39px and on some other pages 160x49px.

But the source code is the same on every page.

Does anybody know what reasons this issue could have?

Source

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <div class="container">
    <a class="navbar-brand" href="http://127.0.0.1">Tool</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbar">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item">
          <a class="nav-link" href="http://127.0.0.1/dashboard">Dashboard</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown">Ticketsystem</a>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="http://127.0.0.1/tickets/new">Neues Ticket</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="http://127.0.0.1/tickets">Alle Tickets</a>
          </div>
        </li>
      </ul>
      <ul class="navbar-nav ml-auto">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data-toggle="dropdown" aria-expanded="false">User</a>
          <div class="dropdown-menu">
            <form action="http://127.0.0.1/logout" method="post">
              <input type="hidden" name="_token" value="#CSRF_TOKEN#">
              <button type="submit" class="dropdown-item">Logout</button>
            </form>
          </div>
        </li>
      </ul>
    </div>
  </div>
</nav>

height 63.39px

height 49px

Upvotes: 0

Views: 474

Answers (1)

Jeremy
Jeremy

Reputation: 1384

This is because different browsers have default CSS on some elements. Best way to remove this is to add this CSS to your code:

* { 
  margin: 0; 
  padding: 0;
}

Or to use necolas.github.io/normalize.css

Upvotes: 1

Related Questions