Need help - sticky navbar - css

Question

So I have this problem, where I have my navigation bar that respondes to screen sizes.
All looks fine, but I need it to be sticky. Whenever I do this, It floats on top of my first hero picture, and with a section of about 40-50px at the top that I can't get rid of.
If someone could please give me a hand with this. It has been doing my head in for 2 weeks now.
Here is the JSfiddle: http://jsfiddle.net/fxar8/
<header>
<nav class="clearfix">
<ul class="clearfix">
<li>Home</li>
<li>Teaching and Learning</li>
<li>News and Events</li>
<li>Contact</li>
<li>Home</li>
<li>Home</li>
</ul>
Menu
</nav>
</header>
<div class="hero-image first">
<h1 class="big">Sample Text</h1>
</div>
<section id="content">
<div class="container">
<section id="grid" class="clearfix">
<div class="grid-6">
<h1>About Us</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Read More</p>
</div>
</section>
</div>
</section>
<a name="tl"><div class="hero-image second"></a>
<h1 class="big">Sample Text</h1>
</div>
<section id="content">
<div class="container">
<section id="grid" class="clearfix">
<div class="grid-4">
<h1>Teaching & Learning</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="grid-2">
<img src="images/tl.jpg" />
</div>
</section>
</div>
</section>
<a name="ne"><div class="hero-image third"></a>
<h1 class="big">Sample Text</h1>
</div>
<section id="content">
<div class="container">
<section id="grid" class="clearfix">
<div class="grid-2">
<img src="images/ne.jpg" />
</div>
<div class="grid-4">
<h1>News and Events</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</section>
</div>
</section>
<a name="contact"><div class="hero-image fourth"></a>
<h1 class="big">Sample Text</h1>
</div>
<section id="content">
<div class="container">
<section id="grid" class="clearfix">
<div class="grid-2">
<center><img src="images/2501.jpg" class="rounded" /></center>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="grid-2">
<center><img src="images/2502.jpg" class="rounded" /></center>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="grid-2">
<center><img src="images/2503.jpg" class="rounded" /></center>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining
essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum
passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</section>
</div>
</section>
<footer class="grid-full">
<p>© BHS 2014.</p>
<p class="right"> Designed by Begintoend</p>
</footer>
Cheers in advanced

Answer 1

So basically you have to modify a few things, because 'Teaching an Learning' doesnt fit.
// This is to fit longer text (Teaching and Learning)
// + padding so it looks nicer
nav a {
min-width: 150px;
padding: 0 15px;
}
// Total width needs to be adjusted
// because we increased the size of navbar (Teaching..)
nav ul {
width: 1000px;
}
// The gap was caused by h1 element's top margin inside hero
.big {
margin-top: 0;
}
Also don't forget to adjust viewports - widths at which to transofrm the menu, since the menus' width has increased