Nav bar disappears at 769px width - css

Question

I am using the Bootstrap navbar-fixed-top method to create a floating nav bar.
I have a few issues I cannot figure out:
Why are my logo and my social icons disappearing when I reduce screen-width to 769px?
Why is my logo and social icons right at the top of the page?
My social icons are too small and bunched up next to each other. How do I change this?
http://codepen.io/dhruvghulati/pen/qrdNBm
What should I do to have a persistent nav bar which is more standard?

Answer 1

.collapse class looks like this:
.collapse {
display: none;
visibility: hidden;
}
And there is:
#media (min-width: 768px)
.navbar-collapse.collapse {
display: block!important;
height: auto!important;
padding-bottom: 0;
overflow: visible!important;
visibility: visible!important;
}
Which means .collapse will be not displayed until screen is 768px width.
Also there is (used for logo):
#media (min-width: 768px)
.navbar-left {
float: left!important;
}
That makes logo float left since screen is 768px width, there is similar class for .navbar-right which is used for social icons container.

Answer 2

You should probably visit the official Bootstrap docs to get more information on navbars. I would use this as the template for your navbar and go from there:
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<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="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active">Link <span class="sr-only">(current)</span></li>
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
<li role="separator" class="divider"></li>
<li>One more separated link</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
Essentially, Bootstrap replaces your nav link with a hamburger button at that screen size. Also, you should give the logo the proper classes (from the code above) to make sure it's always visible. To make the navbar stick to the top of the page, simply add the navbar-fixed-top class to the nav tag. the opening tag should now look like this: <nav class="navbar navbar-default navbar-fixed-top">.

Answer 3

I think its because you are using position:absolute; try using position: relative; instead