How to get a single dropdown with bootstrap

Question

I'm using boostrap for my navigation bar. We've now been required to adapt our code and I find the need to have a dropdown on one of the navigation items however I am struggling to get it to fit in with the bootstrap navbar and get it to display correctly.

I'm trying to make it so that there's a caret with a dropdown beside 'Profile' that on hover reveal 2 links, which currently I've put in a placeholder of the profile place.

<!DOCTYPE html>
<html lang="en">
<head>
<title> Home </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="General.CSS">
<link rel="stylesheet" href="Blog.CSS">
<link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <!-- NavBar -->
  <nav class="navbar navbar-inverse">
  <article class="container-fluid">
    <article class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="NavTitle" href="Home.html">John Doe</a>
    </article>
    <article class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <ul class="dropdown-menu">
            <li><a href="Home.html"> Home </a></li>
            <li><a href="Profile.html"> Profile </a></li>
            <li><a href="Contact.html"> Contact </a></li>
            <li><a href="Tutorial.html"> Tutorial </a></li>
            <li><a href="Blog.html"> Blog </a></li>
          </ul>
        </li>
        <li><a href="Home.html"> Home </a></li>
        <li><a href="Profile.html" > Profile </a>
          <div class="dropdownList">
            <span class="caret"></span>
            <div class="dropdownContent">
              <h5> <a href="Profile.html"> Profile </a> </h5>
              <h5> <a href="Profile.html"> Profile </a> </h5>
            </div>
          </div>
        </li>
        <li><a href="Contact.html"> Contact </a></li>
        <li><a href="Blog.html"> Blog </a></li>
      </ul>
    </article>
  </article>
</nav>
</body>

Blog CSS:

.dropdownList {
display: inline-block;
}

.dropdownContent {
display: none;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}

.dropdownList:hover .dropdownContent {
display: block;
}

General CSS:

.navbar {
border-radius:0px;
font-family:'Lato', sans-serif;
margin-bottom:0px;
}

 .NavTitle {
 color:white;
 letter-spacing:20px;
 font-size:30px;
 }

 .navbar-header {
 text-decoration:none;
 }

.navbar a:hover {
text-decoration:none;
color:white;
}

.navbar-nav>li>a {
color:white !important;
font-size:15px;
}

.navbar ul {
list-style-type:none;
}

.navbar li a:hover {
 background-color:#009999 !important;
 color:white;
 }

https://jsfiddle.net/db3mtrpx/1/ Is this okay? I'm afraid I'm new to all of this so hopefully I've set it up correctly. Let me know if not. — Aaria, Oct 13 '16 at 21:22

score 2 · Accepted Answer · edited May 23 '17 at 10:27

The way to create dropdown menus in Bootstrap 3 is to add the dropdown class to the menu item. In your markup I see that you have the markup for the dropdown but you're not using it. Here's an example to show you how it works:

Example:

  /* BLOG CSS */
  .dropdownList {
    display: inline-block;
  }

  .dropdownContent {
    display: none;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
  }

  .dropdownList:hover .dropdownContent {
    display: block;
  }

  /* GENERAL CSS */
  .navbar {
    border-radius:0px;
    font-family:'Lato', sans-serif;
    margin-bottom:0px;
  }

  .NavTitle {
   color:white;
   letter-spacing:20px;
   font-size:30px;
 }

 .navbar-header {
   text-decoration:none;
 }

 .navbar a:hover {
  text-decoration:none;
  color:white;
}

.navbar-nav>li>a {
  color:white !important;
  font-size:15px;
}

.navbar ul {
  list-style-type:none;
}

.navbar li a:hover {
 background-color:#009999 !important;
 color:white;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <title> Home </title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="General.CSS">
  <link rel="stylesheet" href="Blog.CSS">
  <link href="https://fonts.googleapis.com/css?family=Lato:300,400" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <!-- NavBar -->
  <nav class="navbar navbar-inverse">
    <article class="container-fluid">
      <article class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="NavTitle" href="Home.html">John Doe</a>
      </article>
      <article class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="Home.html"> Home </a></li>
          <li class="dropdown">
            <a href="Profile.html" data-toggle="dropdown" class="dropdown-toggle"> Profile<span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="Profile.html"> Profile </a></li>
              <li><a href="Profile.html"> Profile </a></li>
            </ul>
          </li>
          <li><a href="Contact.html"> Contact </a></li>
          <li><a href="Blog.html"> Blog </a></li>
        </ul>
      </article>
    </article>
  </nav>
</body>

If you wish to display the options when hovering over the dropdown menu, I recommend having a look at this question for example: How to make twitter bootstrap menu dropdown on hover rather than click

How to get a single dropdown with bootstrap

1 Answers1