I am encountering the issue of not being able to make my left hand side navigation bar to have a fixed width and at the same time make not only the top-bar, but also the side navigation bar sticky.
I tried all the google results and all the stackoverflow hints I could find and still no luck.
My HTML:
<!-- Navigation bar -->
<div class="sticky">
<nav class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name"><h1><a href="#"><img src="img/logo.png"> </a></h1></li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
</ul>
<section class="top-bar-section">
<ul class="left"></ul>
<ul class="right">
<li class="has-form">
<form>
<div class="row collapse">
<div class="small-8 columns">
<input type="text" name="searchfield">
</div>
<div class="small-4 columns">
<a href="#" class="tiny button">Search</a>
</div>
</div>
</form>
</li>
</ul>
</nav>
</section>
</div>
<!-- Main content -->
<!-- Nav Sidebar -->
<div class="row">
<div class="large-2 columns">
<div class="ad">
<ul class="side-nav">
<li><a class="tnav" href="#">Nachrichten</a></li>
<li><a class="tnav" href="#">Kultur</a></li>
<li><a class="tnav" href="#">Wirtschaft</a></li>
<li><a class="tnav" href="#">Sport</a></li>
<li><a class="tnav" href="#">Wissenschaft</a></li>
<li><a class="tnav" href="#">Englisch</a></li>
<li><a class="tnav" href="#">Technologie</a></li>
</ul>
</div>
</div>
<!-- Start Tiles -->
<div id="tiles" class="large-10 columns"s></div>
</div>
My code here: http://jsfiddle.net/TPbhD/2/
See preview here: http://jsfiddle.net/TPbhD/2/embedded/result/
Template of idea:
