Databases
StackOverflow2013
Postsdbo
POWant to fix left nav list so it stays below navbar
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWant to fix left nav list so it stays below navbar
    text
    copied!<p>I want to do something like this:</p> <p><a href="http://twitter.github.io/bootstrap/components.html" rel="nofollow">http://twitter.github.io/bootstrap/components.html</a></p> <p>Where there is a navbar, a "jumbotron", and the nav list sits on the left. It sits below the jumbotron but when you scroll down it scrolls as well until it hits the navbar, then it scrolls down with it.</p> <p>So far I have it so it scrolls down with the page but the margin at the top is navbar+jumbotron so there's a ton of white space once I scroll down. I can't seem to find the answer in the source code.</p> <p>I've done this by fixing position of left nav list and floating the content on the right float:left with a left margin.</p> <p>Thanks for your help.</p> <pre><code>&lt;!-- start page wrap --&gt; &lt;div id="wrap"&gt; &lt;!-- START NAV --&gt; &lt;div class ="navbar navbar-inverse navbar-fixed-top"&gt; &lt;div class="navinner"&gt; &lt;div class="container"&gt; &lt;ul class="nav pull-right helfont"&gt; &lt;li&gt;&lt;!-- TOP NAV BAR LIST HERE --&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- END NAV --&gt; &lt;div id="faq" class="container"&gt; &lt;div class="title"&gt; &lt;h1&gt; Frequently Asked Questions &lt;/h1&gt; &lt;/div&gt; &lt;div class="row"&gt; &lt;div class="span3 offset1 faq-list"&gt; &lt;ul class="nav nav-list" style="padding-left: 20px;"&gt; &lt;li&gt; &lt;!-- NAV LIST HERE THAT I WANT ON LEFT --&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="span7 offset3 faq-content"&gt; &lt;!-- CONTENT ON RIGHT HERE --&gt; &lt;/div&gt; </code></pre> <p>css:</p> <pre><code> #faq { margin-top: 30px; } #faq .row { margin-top: 40px; } .faq-list { position: fixed; } .faq-content { margin-left: 320px !important; float:left; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload