I recently designed a website using a bootstrap theme and incorporated a navbar into it.
However, I noticed that the navbar collapses in responsive mode, but stays fixed to the right side of the page. This is causing me to horizontally scroll in order to access the dropdown menu.
https://i.sstatic.net/qGI6r.png
Can someone identify what's going wrong here?
.navbar-default {
background-color: white;
border-color: rgba(34, 34, 34, 0.05);
font-family: Roboto, Arial, sans-serif;
-webkit-transition: all 0.35s;
-moz-transition: all 0.35s;
transition: all 0.35s;
}
.navbar-default .navbar-header .navbar-brand {
color: #424242;
font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
font-weight: 700;
text-transform: uppercase;
}
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
...
</nav>