Issue
Almost done with my navbar (see code below), but the "Username" dropdown isn't behaving as expected. On larger screens it drops up, which is great, but on smaller screens it's dropping down into the navbar. If you resize the page, you'll see what I mean. Any ideas how to make it drop up on smaller screens too?
Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Navbar</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
body {margin:70px 20px}
.navbar-nav {
float: none;
text-align: center;
}
......
</style>
</head>
<header>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div>
<ul class="nav navbar-nav">
<li class="nav-item active"><a href="index.html" id="PostsLink">Posts</a><li>
<li class="nav-item"><a href="submit.html" id="SubmitPostLink">Submit</a></li>
<li class="nav-item"><a href="buy.html" id="BuyLink">Buy</a></li>
<li class="nav-item inlinee"><a href="about_us.html" id="ContactUsLink">About Us</a></li>
</ul>
</div>
......
</ul>
</div>
......
</body>
</html>
Your help in resolving this issue would be highly appreciated and will bring my project closer to completion.