How to add dropdown below the navbar in bootstrap 3.3.7 - html

Question

So I am trying to make my dropdown actually appear below the navbar like in the shown picture
Here is my html:`
<div class="container">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse" data-target="#myNavbar">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand logo" href="#"></a>
</div>
<div class="collapse navbar-collapse navbar-right" id="myNavbar">
<ul class="nav navbar-nav">
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-expanded="false">blah
<!-- <span class="caret"></span> -->
</a>
<ul class="dropdown-menu" role="menu">
<li>blah1</li>
<li>blah 2</li>
<li>blah 3</li>
</ul></li>
<li>blah</li>
<li class="dropdown"><a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-expanded="false">blah
</a>
<ul class="dropdown-menu" role="menu">
<li>blah</li>
<li>blah & blah</li>
<li>blah</li>
</ul></li>
<li> blah</li>
<li>blah</li>
<li><img src="../images/search.png"/></li>
<li>Login</li>
</ul>
</div>
</div>
</nav>
</div>
Here is my css:
.icon--house, .modal button, article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block
}
.navbar-default {
background-color: #030303 !important;
border: #030303;
}
.nav > li > a {
padding: 25px 20px;
font-size: 16px;
}
/* bigger menu items in dropdown */
.dropdown-menu > li > a {
padding: 20px;
}
/* removes whitespace in dropdown from navbar */
.dropdown-menu {
padding: 0;
float: right;
left: 50% !important;
right: auto !important;
text-align: center !important;
transform: translate(-50%, 0) !important;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.dropdown-menu>li>a:hover {
color: #FFF;
background-color: #da1a32;
text-decoration: none;
}
.navbar .navbar-nav > li > a {
color: #FFF !important;
border-bottom: transparent solid 3px;
padding-bottom: 5px;
}
.navbar .navbar-nav > li > a:hover {
border-bottom: #da1a32 solid 3px;
}
a:link {
text-decoration: none;
color: #FFF !important;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
text-decoration: none;
color: #FFF;
}
a:active {
text-decoration: none;
color: #FFF;
}
.align-center, .missing {
text-align: center
}
body {
font-family: Montserrat, sans-serif;
font-weight: 300;
line-height: 1.4;
color: #202020;
overflow-x: hidden
}
img {
max-width: 100%;
height: auto
}
a {
transition: .3s ease;
text-decoration: none
}
h1 {
font-size: 30px;
line-height: 1.1;
margin-bottom: .5em
}
this is what I want it to appear like:
And this is what It looks like overlapping the actual navbar:
I've tried some different things such as adding a margin to the bottom of my header but it did not help. If anyone could help it would be greatly appreciated, as I'm not sure where to go from here. If you could also tell me exactly what css it was that needed to be change that would be great. Thanks.

Answer 1

You just need to adjust the 'top' value on the .dropdown-menu class, which is absolute positioned. probably at 100% now
.dropdown-menu {
top: 100%;
}
this will make it line up with the bottom of the li.dropdown > a element,
so if you have 20 extra px of black background from navbar padding, try this:
.dropdown-menu {
top: calc(100% + 20px);
}