Bootstrap responsive navbar - html

Question

I am having an issue with bootstrap navbar in terms of responsiveness.
I used data-spy="affix" on my navbar to make sure it stays fixed at the top while scrolling down and it works perfectly.
The problem however is when I resize the window to mobile dimension.
When I resize to mobile dimension the right part of my navbar will appear out of bounds. Meaning I can't see the content because my navbar is too wide for the screen. However, when I scroll down and the affix effect takes over, my navbar scales to mobile screen and the content that went out of screen will align perfectly for the mobile screen and the entire navbar will be responsive.
Here is my HTML code for navbar:
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="0">
<div class="navbar-header">
<div class="navbar-brand">
Title
</div>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Page1</li>
<li>Page2</li>
<li>Blog</li>
<li>Contact</li>
<li>Shop</li>
<li><span class="glyphicon glyphicon-shopping-cart badge">5</span></li>
</ul>
</div>
</nav>
And this is my relevant CSS-code:
body {
font-size:large;
}
.glyphicon{
font-size: 95%;
}
.affix {
top:0px;
width:100%;
z-index:99999;
}
.affix + .container-fluid {
padding-top: 6.801%;
}
.navbar-header{
margin-left: 5% !important;
}
.navbar{
width:100% !important;
background-image:none;
background-color:black;
}
.navbar div a{
line-height:80px;
}
Also created a JSFiddle.

Answer 1

i have updated your codes in jsfiddle. can you please check now, and if you dont get that add bootstrap button to your navbar-header and i have a css code for you
#media (max-width:767px){
.navbar div a {
line-height: 20px;
}
.affix-top .collapse {
display:block !important;
}
}