Bootstrap navbar dropdown inside of navbar

Question

I am working on a site and I started off with the dashboard example from the Bootstrap website. However, when I added in a dropdown to the navbar, it stays inside the navbar and breaks the whole thing. I can't figure out the style that is causing this problem. The code seems a bit too much to paste here, so I put it into Codepen: https://codepen.io/andersmmg/pen/wOgmby

Here's the css it adds to make the dashboard style work properly:

body {
  font-size: .875rem;
}

.feather {
  width: 16px;
  height: 16px;
  vertical-align: text-bottom;
}

/*
 * Sidebar
 */

.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 100; /* Behind the navbar */
  padding: 48px 0 0; /* Height of navbar */
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

.sidebar-sticky {
  position: relative;
  top: 0;
  height: calc(100vh - 48px);
  padding-top: .5rem;
  overflow-x: hidden;
  overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
}

@supports ((position: -webkit-sticky) or (position: sticky)) {
  .sidebar-sticky {
    position: -webkit-sticky;
    position: sticky;
  }
}

.sidebar .nav-link {
  font-weight: 500;
  color: #333;
}

.sidebar .nav-link .feather {
  margin-right: 4px;
  color: #999;
}

.sidebar .nav-link.active {
  color: #007bff;
}

.sidebar .nav-link:hover .feather,
.sidebar .nav-link.active .feather {
  color: inherit;
}

.sidebar-heading {
  font-size: .75rem;
  text-transform: uppercase;
}

/*
 * Content
 */

[role="main"] {
  padding-top: 48px; /* Space for fixed navbar */
}

/*
 * Navbar
 */

.navbar-brand {
  padding-top: .75rem;
  padding-bottom: .75rem;
  font-size: 1rem;
  background-color: rgba(0, 0, 0, .25);
  box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar .form-control {
  padding: .75rem 1rem;
  border-width: 0;
  border-radius: 0;
}

.navbar .form-control::placeholder {
    color: white;
}

.navbar .form-control:focus::placeholder {
    color: rgba(0, 0, 0, 0.46);
}

.form-control-dark {
  color: #fff;
  background-color: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .1);
}

.form-control-dark:focus {
  border-color: transparent;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
}

Answer 1

I just removed the code you had for the drop down menu and replaced it with the code example from the documentation and the drop menu now functions correctly. I think some of your code was not allowing the drop down to exist outside of its container which was causing its parent container to expand (namely the ul and li elements)

<nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
  <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="index.php">Store Manager</a>
  <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search">
  <div class="dropdown dropleft">
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      andersmmg
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <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>
  </div>
</nav>

You will still need to style the button to the colors you want but the functionality is there. I changed the menu to show on the left side (dropleft) so it would not run off the page. You can see my Fiddle of working solution here. Hope that helps.

Answer 2

Go through this pen to check the answer codepen for solution 1) i just made ul position absolute and gave some grid layout for alignment purpose.

.navbar-nav {
 position: absolute;
 left: 85%;
}

Answer 3

If you see bootstrap gives in your element style:

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

That's overrides also bootstrap class

    .dropdown-menu {
        position: absolute;
}

I don't know if this is the best solution, but you can achieve it with this:

.dropdown-menu.show {
    position: absolute;
    left: -60px;
}

I hope that helps you!