CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3drop-down-menu
Farhan Habib
Farhan Habib

Reputation: 153

How to align dropdown menu in Navbar in Bootstrap with css?

So I have this Navbar and I am adding a Dropdown Menu and a user profile on the Right most.[ScreenShot of my NavBar][1]. As you can see the drop downs are a bit lower than the rest of my menu items.

Here is my HTML and CSS:

.dropdown {
  padding-top: 0px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<nav class="navbar navbar-custom">
  <div class="container-fluid">
    <div class="navbar-header">
      <!--LOGO-->
      <a class="navbar-brand" href="index.php"><img src="assets/img/am.png" alt="ArchiveManager" height="35"></a>
    </div>

    <div>
      <div class="collapse navbar-collapse">
        <!--Menu Items-->
        <ul class="nav navbar-nav" style="font-size:15px;">
          <li><a href="index.php">Home</a></li>
          <li><a href="newIssue.php">New Issue</a></li>
          <li><a href="newArticle.php">New Article</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Management<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="magManagement.php">Magazine Management</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Article Management</a></li>
            </ul>
          </li>
          <li><a href="#">Statistics</a></li>
        </ul>
      </div>
    </div>
  </div>
</nav>

Upvotes: 1

Views: 2521

Answers (4)

Farhan Habib
Farhan Habib

Reputation: 153

After trying a lot of different things, this worked

.dropdown {
  margin-top: 0px;
}

and then refreshing my browser (CTRL+ F5) and then it worked. Probably it was reading from the cache and nothing was happening when I was changing the code.

Thanks Everyone!

Upvotes: 1

Narine Poghosyan
Narine Poghosyan

Reputation: 893

Try this:

<nav class="navbar navbar-inverse">
    <div class="container">
        <div class="navbar-header">
            <!--LOGO-->
            <a class="navbar-brand" href="index.php"><img src="assets/img/am.png" alt="ArchiveManager" height="35"></a>
        </div>
 ....

Upvotes: 0

Rohit Kumar
Rohit Kumar

Reputation: 806

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-custom">
  <div class="container-fluid">

    <div class="navbar-header">
      <!--LOGO-->
      <a class="navbar-brand" href="index.php"><img src="assets/img/am.png" alt="ArchiveManager" height="35"></a>
    </div>

    <div>
      <div class="collapse navbar-collapse">
        <!--Menu Items-->
        <ul class="nav navbar-nav" style="font-size:15px;">
          <li><a href="index.php">Home</a></li>
          <li><a href="newIssue.php">New Issue</a></li>
          <li><a href="newArticle.php">New Article</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Management<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="magManagement.php">Magazine Management</a></li>
              <li role="separator" class="divider"></li>
              <li><a href="#">Article Management</a></li>
            </ul>
          </li>
          <li><a href="#">Statistics</a></li>
        </ul>
      </div>
    </div>
  </div>

Upvotes: 0

Andrew Ex
Andrew Ex

Reputation: 36

Have you checked to see if there is a top margin? Try setting margin-top:0 as well.

.dropdown{
    margin-top: 0px;
}

You should open up your browsers developer tools and select the element inspector to see what CSS property is pushing down the dropdown.

You can also pull up the dropdown using the position:relative CSS property along with a top:-5px but this is not a good solution because you are better off finding the real cause of what is pushing down the element.

I would also recommend not editing the .dropdown class globally and adding an additional class like so.

<li class="someclass dropdown">

that way you can edit the CSS as shown below and no effect other dropdowns you may add to the page content.

.someclass.dropdown{
    margin-top: 0px;
}

Hope this helps.

Upvotes: 0

Related Questions