CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Sam B.
Sam B.

Reputation: 3033

Bootstrap dropdown on navbar pushing content down

I'm using a dropdown option on the top navbar on bootstrap and it has one quirk, it pushes the content on the left of the navbar down as the navbar appears like so.

before click

enter image description here

after click

enter image description here

This is the html used

<!DOCTYPE html>
<html>
<head>
    <title>Notifications</title>

    <meta charset="utf-8"/>

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/notification.css">

    <script type="text/javascript" src="js/jquery-3.3.1.slim.min.js"></script>
    <script type="text/javascript" src="js/popper.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
</head>
<body>
    <!-- Image and text -->
    <nav class="navbar navbar-light">
      <a class="navbar-brand" href="#">
        <img src="img/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
        Bootstrap
      </a>

      <ul class="navbar-nav">
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Notifications <span class="badge badge-secondary">0</span>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <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>
         </li>
      </ul>
    </nav>


</body>
</html>

Upvotes: 1

Views: 13692

Answers (6)

Nikhil Vishwakarma
Nikhil Vishwakarma

Reputation: 19

This happens because bootstrap have css like :

.navbar-nav .dropdown-menu{
    position: static;
}

To avoid the problem of pushing the content down on dropdown. Just sipmly add css :

.navbar-nav .dropdown-menu{
    position: absolute;
}

in case your menus are on the right side and content gets overflow or not correctly visible then just simply add to

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

for getting menu dropdown to align-right

Upvotes: 0

Spencer Hatch
Spencer Hatch

Reputation: 1

For icons in the top right of a webpage...

  1. Make sure your CSS file comes after the bootstrap lib CSS file.
  2. Insert the below code into your CSS file.
  3. Add id="dropdownMenu" to your html tag. This should prevent the popup from going off the page while also preventing the navbar from ballooning out.
#dropdownMenu {
    position: absolute;
    left: auto;
    right: 0;
}

Upvotes: 0

לבני מלכה
לבני מלכה

Reputation: 16251

The default definition for a nav in bootstrap is to push down content.

You can setposition: absolute; on ul

ul{
    position: absolute;
    right: 50px;
    top: 14px;
}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <!-- Image and text -->
    <nav class="navbar navbar-light">
      <a class="navbar-brand" href="#">
        <img src="img/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
        Bootstrap
      </a>
<div>
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Notifications <span class="badge badge-secondary">0</span>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <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>
         </li>
      </ul>
      </div>
    </nav>

Upvotes: 2

BlizZard
BlizZard

Reputation: 589

.dropdown-menu{
position:absolute;
}

Making the dropdown as position absolute, will give you the desired output.

Upvotes: 2

Roohi Zuwairiyah
Roohi Zuwairiyah

Reputation: 363

Try putting the contents within a single 'div' element as in the code segment below:

    <body>
    <!-- Image and text -->
    <nav class="navbar navbar-light">
    <div class="container">
      <a class="navbar-brand" href="#">
        <img src="img/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">Bootstrap
      </a>

      <ul class="navbar-nav">
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Notifications <span class="badge badge-secondary">0</span>
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <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>
         </li>
      </ul>
    </div>
    </nav>
   </body>

Upvotes: 1

Saurabh Mistry
Saurabh Mistry

Reputation: 13669

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <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>
      </li>
    </ul>
  </div>
</nav>

Upvotes: 0

Related Questions