Twitter-Bootstrap 3 Collapsed Navbar overlaps header - css

Question

So I have a navbar that is fixed but becomes sticky when the user scrolls through the webpage. My problem is that whenever I resize my browser the navbar overlaps my subheader (the one with the "The Official Student Publication ..".
Webshot
http://i.stack.imgur.com/rIxqo.png
HTML CODE For Index
$('#nav').affix({
offset: {
top: $('header').height()
}
});
/* bootstrap 3 helpers */
.navbar-form input, .form-inline input {
width:auto;
position: absolute;
}
header {
height:160px;
}
#nav.affix {
position: fixed;
top: 0;
width: 100%;
z-index:10;
}
/* Create a medium height at 40px */
.navbar-md {min-height:40px}
.navbar-md .navbar-brand,
.navbar-md .navbar-nav>li>a {padding-top:10px; padding-bottom:10px}
.navbar-md .navbar-brand {height: 40px}
.navbar-md .navbar-toggle {margin: 6px 12px 6px 0px; padding: 6px 7px 6px 7px;}
.navbar-md .navbar-toggle .icon-bar {width: 19px;}
.container#slider {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.container#headerC {
padding:15px;
}
/* RESPONSIVE HEADER*/
.navbar-header {
background-image:url("bootstraplogo.png", "bootstraplogoslice1.png")
background-repeat:no-repeat, repeat-x;
background-position:center;
}
#media only screen and (min-width: 479px) and (max-width: 991px) {
body {
padding-top: 100px;
}
.navbar-header {
background-size: auto auto;
}
.navbar-header {
height: 45px;
}
}
#media only screen and (max-width: 479px) {
.navbar-header {
background-size: auto 50px, 1px 50px;
}
.navbar-md#header {
height:50px;
}
}
/* RESPONSIVE HEADER*/
.container-header {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
.text-center {
text-align: center;
}
p#headerP {
display: inherit;
padding: 30px 0 10px;
text-align: center;
text-shadow: 1px 1px 2px #76141D;
font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 5em;
font-weight: 700;
line-height: normal;
color: #8F1925;
}
p#subheader {
display: inherit;
margin: 0;
margin-bottom: 50px;
padding: 0 0 40px;
text-align: center;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
text-transform: uppercase;
font-size: 1.25em;
font-weight: 400;
letter-spacing: 3px;
color: #E72635;
}
body {
font-family: "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
background-color: #FEFDFD;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
padding-top: 10px;
}
header {
height: 200px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-transform: uppercase;
font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight: 700;
letter-spacing: 1px;
}
p {
font-size: 1.25em;
line-height: 1.6;
color: #000;
}
hr {
max-width: 400px;
border-color: #999999;
}
.brand,
.address-bar {
display: none;
}
.navbar-brand {
text-transform: uppercase;
font-weight: 900;
letter-spacing: 2px;
padding: 10px;
}
.navbar-nav {
text-transform: uppercase;
font-weight: 400;
letter-spacing: 3px;
}
.img-full {
min-width: 100%;
}
.brand-before,
.brand-name {
text-transform: capitalize;
}
.brand-before {
margin: 15px 0;
}
.brand-name {
margin: 0;
font-size: 4em;
}
.tagline-divider {
margin: 15px auto 3px;
max-width: 250px;
border-color: #999999;
}
.box {
margin-bottom: 20px;
padding: 30px 15px;
background: #fff;
background: rgba(255,255,255,0.9);
}
.intro-text {
text-transform: uppercase;
font-size: 1.25em;
font-weight: 400;
letter-spacing: 1px;
}
.img-border {
float: none;
margin: 0 auto 0;
border: #999999 solid 1px;
}
.img-left {
float: none;
margin: 0 auto 0;
}
footer {
background: #fff;
background: rgba(255,255,255,0.9);
}
footer p {
margin: 0;
padding: 50px 0;
}
#media screen and (min-width:768px) {
.brand {
display: inherit;
margin: 0;
padding: 30px 0 10px;
text-align: center;
text-shadow: 1px 1px 2px #76141D;
font-family: "Josefin Slab","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 5em;
font-weight: 700;
line-height: normal;
color: #8F1925;
}
.top-divider {
margin-top: 0;
}
.img-left {
float: left;
margin-right: 25px;
}
.address-bar {
display: inherit;
margin: 0;
padding: 0 0 40px;
text-align: center;
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
text-transform: uppercase;
font-size: 1.25em;
font-weight: 400;
letter-spacing: 3px;
color: #E72635;
}
.navbar {
border-radius: 0;
}
.navbar-header {
display: none;
}
.navbar {
min-height: 0;
}
.navbar-default {
border: none;
background: #fff;
background: rgba(255,255,255,0.9);
}
.nav>li>a {
padding: 35px;
}
.navbar-nav>li>a {
line-height: normal;
}
.navbar-nav {
display: table;
float: left;
table-layout: fixed;
font-size: 1.25em;
}
}
#media screen and (min-width:1200px) {
.box:after {
content: '';
display: table;
clear: both;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container" id="headerC">
<div class="text-center">
<header class="masthead">
<p id="headerP">The University Digest</p>
<p id="subheader">The Official Student Publication of Western Mindanao State University</p>
</header>
</div>
</div>
<!-- Navigation -->
<div id="nav">
<div class=" navbar-custom navbar navbar-inverse navbar-md">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand " href="#">Menu</a>
</div>
<div class="navbar-collapse collapse navbar-inverse-collapse navbar-md">
<ul class="nav navbar-nav ">
<li>Home</li>
<li class="dropdown">
Articles <b class="caret"></b>
<ul class="dropdown-menu">
<li>Article</li>
<li>Comics</li>
<li>Editorial Cartoon</li>
<li>Uncensored</li>
</ul>
</li>
<li class="dropdown">
Publications<b class="caret"></b>
<ul class="dropdown-menu">
<li>Newsletters</li>
<li>Magazine</li>
<li>Tejido</li>
</ul>
<li>Applications</li>
<li class="dropdown">
The Staff<b class="caret"></b>
<ul class="dropdown-menu">
<li>Editorial Board</li>
<li>By-Laws</li>
<li>Contacts</li>
</ul>
<li>WMSU Portal</li>
<li>Log In</li>
</ul>
</li>
</ul>
</div>
</div>
</div>

Answer 1

remove the height given for header
header {
height: 200px;
}
header {
height: 160px;
}
because of the height the nav was coming on overlapping on the header
$('#nav').affix({
offset: {
top: $('header').height()
}
});
/* bootstrap 3 helpers */
.navbar-form input,
.form-inline input {
width: auto;
position: absolute;
}
#nav.affix {
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
/* Create a medium height at 40px */
.navbar-md {
min-height: 40px
}
.navbar-md .navbar-brand,
.navbar-md .navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px
}
.navbar-md .navbar-brand {
height: 40px
}
.navbar-md .navbar-toggle {
margin: 6px 12px 6px 0px;
padding: 6px 7px 6px 7px;
}
.navbar-md .navbar-toggle .icon-bar {
width: 19px;
}
.container#slider {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.container#headerC {
padding: 15px;
}
/* RESPONSIVE HEADER*/
.navbar-header {
background-image: url("bootstraplogo.png", "bootstraplogoslice1.png") background-repeat: no-repeat, repeat-x;
background-position: center;
}
#media only screen and (min-width: 479px) and (max-width: 991px) {
body {
padding-top: 100px;
}
.navbar-header {
background-size: auto auto;
}
.navbar-header {
height: 45px;
}
}
#media only screen and (max-width: 479px) {
.navbar-header {
background-size: auto 50px, 1px 50px;
}
.navbar-md#header {
height: 50px;
}
}
/* RESPONSIVE HEADER*/
.container-header {
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}
.text-center {
text-align: center;
}
p#headerP {
display: inherit;
padding: 30px 0 10px;
text-align: center;
text-shadow: 1px 1px 2px #76141D;
font-family: "Josefin Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 5em;
font-weight: 700;
line-height: normal;
color: #8F1925;
}
p#subheader {
display: inherit;
margin: 0;
margin-bottom: 50px;
padding: 0 0 40px;
text-align: center;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
text-transform: uppercase;
font-size: 1.25em;
font-weight: 400;
letter-spacing: 3px;
color: #E72635;
}
body {
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #FEFDFD;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
padding-top: 10px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
text-transform: uppercase;
font-family: "Josefin Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
letter-spacing: 1px;
}
p {
font-size: 1.25em;
line-height: 1.6;
color: #000;
}
hr {
max-width: 400px;
border-color: #999999;
}
.brand,
.address-bar {
display: none;
}
.navbar-brand {
text-transform: uppercase;
font-weight: 900;
letter-spacing: 2px;
padding: 10px;
}
.navbar-nav {
text-transform: uppercase;
font-weight: 400;
letter-spacing: 3px;
}
.img-full {
min-width: 100%;
}
.brand-before,
.brand-name {
text-transform: capitalize;
}
.brand-before {
margin: 15px 0;
}
.brand-name {
margin: 0;
font-size: 4em;
}
.tagline-divider {
margin: 15px auto 3px;
max-width: 250px;
border-color: #999999;
}
.box {
margin-bottom: 20px;
padding: 30px 15px;
background: #fff;
background: rgba(255, 255, 255, 0.9);
}
.intro-text {
text-transform: uppercase;
font-size: 1.25em;
font-weight: 400;
letter-spacing: 1px;
}
.img-border {
float: none;
margin: 0 auto 0;
border: #999999 solid 1px;
}
.img-left {
float: none;
margin: 0 auto 0;
}
footer {
background: #fff;
background: rgba(255, 255, 255, 0.9);
}
footer p {
margin: 0;
padding: 50px 0;
}
#media screen and (min-width: 768px) {
.brand {
display: inherit;
margin: 0;
padding: 30px 0 10px;
text-align: center;
text-shadow: 1px 1px 2px #76141D;
font-family: "Josefin Slab", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 5em;
font-weight: 700;
line-height: normal;
color: #8F1925;
}
.top-divider {
margin-top: 0;
}
.img-left {
float: left;
margin-right: 25px;
}
.address-bar {
display: inherit;
margin: 0;
padding: 0 0 40px;
text-align: center;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
text-transform: uppercase;
font-size: 1.25em;
font-weight: 400;
letter-spacing: 3px;
color: #E72635;
}
.navbar {
border-radius: 0;
}
.navbar-header {
display: none;
}
.navbar {
min-height: 0;
}
.navbar-default {
border: none;
background: #fff;
background: rgba(255, 255, 255, 0.9);
}
.nav>li>a {
padding: 35px;
}
.navbar-nav>li>a {
line-height: normal;
}
.navbar-nav {
display: table;
float: left;
table-layout: fixed;
font-size: 1.25em;
}
}
#media screen and (min-width: 1200px) {
.box:after {
content: '';
display: table;
clear: both;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container" id="headerC">
<div class="text-center">
<header class="masthead">
<p id="headerP">The University Digest</p>
<p id="subheader">The Official Student Publication of Western Mindanao State University</p>
</header>
</div>
</div>
<!-- Navigation -->
<div id="nav">
<div class=" navbar-custom navbar navbar-inverse navbar-md">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-inverse-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand " href="#">Menu</a>
</div>
<div class="navbar-collapse collapse navbar-inverse-collapse navbar-md">
<ul class="nav navbar-nav ">
<li>Home
</li>
<li class="dropdown">
Articles <b class="caret"></b>
<ul class="dropdown-menu">
<li>Article
</li>
<li>Comics
</li>
<li>Editorial Cartoon
</li>
<li>Uncensored
</li>
</ul>
</li>
<li class="dropdown">
Publications<b class="caret"></b>
<ul class="dropdown-menu">
<li>Newsletters
</li>
<li>Magazine
</li>
<li>Tejido
</li>
</ul>
<li>Applications
</li>
<li class="dropdown">
The Staff<b class="caret"></b>
<ul class="dropdown-menu">
<li>Editorial Board
</li>
<li>By-Laws
</li>
<li>Contacts
</li>
</ul>
<li>WMSU Portal
</li>
<li>Log In
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>