<p dir="auto">The Fixed-to-top navbar when used in mobile view (i.e. clicking a link) does not collapse afterwards. This means that the menu remains expanded and therefore covers the content.</p>
<p dir="auto">See: <a href="http://www.eng.ox.ac.uk/hems/hems.html" rel="nofollow">http://www.eng.ox.ac.uk/hems/hems.html</a></p>
<p dir="auto">Is it possible to have the menu collapse down after clicking a hyperlink?</p>
<p dir="auto">Hello,</p>
<p dir="auto">I am fiddling a bit around with the responsive approach in Bootstrap. I feel that the way it is implemented is sometimes a bit static. Are there any plans or idea's (or am I not aware of the ability) to say something like "4 columns" on desktop size. "3 columns" on tablet size. And/or to say the sidebar for instance is just informative, it should be hidden when seeing the site on a mobile device.</p>
<p dir="auto">I know how I can do this myself, but I was wondering if this community had such a thing in the planning or you have idea's what the best way is to build it? Any feedback is welcome.</p>
<p dir="auto">I am creating something like this now.</p>
<p dir="auto">Example 1 (4 columns on desktop, 3 on tablet)</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div class=&quot;span3 portrait-span4&quot;&gt;one&lt;/div&gt;
&lt;div class=&quot;span3 portrait-span4&quot;&gt;two&lt;/div&gt;
&lt;div class=&quot;span3 portrait-span4&quot;&gt;three&lt;/div&gt;
&lt;div class=&quot;span3 portrait-span12&quot;&gt;four&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div class="span3 portrait-span4"&gt;one&lt;/div&gt;
&lt;div class="span3 portrait-span4"&gt;two&lt;/div&gt;
&lt;div class="span3 portrait-span4"&gt;three&lt;/div&gt;
&lt;div class="span3 portrait-span12"&gt;four&lt;/div&gt;
</code></pre></div>
<p dir="auto">Example 2 (2 columns on desktop, 1 on tablet)</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;div class=&quot;span8 portrait-span12&quot;&gt;main&lt;/div&gt;
&lt;div class=&quot;span4 portrait-hidden&quot;&gt;side&lt;/div&gt;"><pre class="notranslate"><code class="notranslate">&lt;div class="span8 portrait-span12"&gt;main&lt;/div&gt;
&lt;div class="span4 portrait-hidden"&gt;side&lt;/div&gt;
</code></pre></div>
<p dir="auto">CSS</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" @media (min-width: 768px) and (max-width: 980px) {
    .portrait-hidden{
        display:none;
    }
       .portrait-span12, .portrait-container {
        width: 724px;
    }
       .portrait-span4 {
        width: 228px;
    }
"><pre class="notranslate"><code class="notranslate"> @media (min-width: 768px) and (max-width: 980px) {
    .portrait-hidden{
        display:none;
    }
       .portrait-span12, .portrait-container {
        width: 724px;
    }
       .portrait-span4 {
        width: 228px;
    }

</code></pre></div>