Currently, I am working on implementing a simple dropdown textbox for a button within a navbar. However, I am encountering an issue where the text does not drop below the button as expected. Initially, it was displaying to the left, obstructing the brand logo. After setting the dropdown-menu position to relative, it now appears on the right side, causing the navbar to expand downward. I have attempted adjusting the margins with no success.
I want the dropdown text to appear directly below the button and navbar. I am unsure of why this setup is not functioning correctly?
HTML
<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="#bs-example-navbar-collapse-1" aria-expanded="false">
<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" href="#">news</a>
</div>
<div class="dropdown show">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
How It Works
</button>
<div class="dropdown-menu" data-toggle="dropdown" aria-labelledby="dropdownMenuButton">
<div class="dropdown-item"> Click </div>
</div>
</div>
</div>
</nav>
CSS
.navbar-header .navbar-brand{
color: rgb(97, 100, 206);
font-size: 2.0em;
}
.navbar {
background-color: rgb(71, 71, 88);
background-color: black;
height: 100%;
font-family: 'Alegreya Sans', sans-serif;
margin: 0;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-menu {
height: 120px;
width: 150px;
position: relative;
}
.dropdown button {
background-color: black;
color: rgb(163, 163, 179);
border: .5px solid black;
float: left;
margin-top: 9px;
}
Scripts
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>AetherNews</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans:900" rel="stylesheet">
</head>