Sha256: cfbdc5c45acf7834c451c35ff0e203bb922269a64d395f5b71ce7140f0232d6b
Contents?: true
Size: 1.6 KB
Versions: 12
Compression:
Stored size: 1.6 KB
Contents
<header id="header-is_fixed">
<%= render partial: "forever_style_guide/sections/components/navigation/marketing" %>
</header>
<div class="container l-section">
<div class="card l-section-far l-padded-thick" style="min-height: 800px;">
<h1>Fixed Navigation</h1>
<p>To implement fixed navigation:</p>
<ol>
<li>Add an id of "header-is_fixed" to the main <header> element</li>
<li>Add top padding to the <body> to match the height of the header (in most cases this will be equal to the $header_height variable unless there's a subnav or additional fixed elements.)</li>
<li>Include the nav-fixed.js snippet</li>
</ol>
<p>How it works:</p>
<ul>
<li>On the desktop the header is fixed and behaves as any other fixed element</li>
<li>In mobile contexts, we have to make sure that the nav is scrollable when expanded beyond the height of the viewport
<ul>
<li>We can rely on <a href='http://getbootstrap.com/javascript/#dropdowns-methods'>Bootstrap's Dropdown Methods</a> to help here.</li>
<li>When a dropdown w/ in the nav is expanded we check to see if this makes the height of the header greater than the height of the viewport</li>
<li>If it is greater, we give the header a max height equal to the viewport height to allow for vertical scrolling w/ in the header.</li>
<li>We make the body (now behind the header) fixed so it does interfere w/ scrolling.</li>
<li>When the dropdown or the collapse nav is closed, we make sure the body is no longer fixed</li>
</ul>
</li>
</ul>
</div>
</div>
Version data entries
12 entries across 12 versions & 1 rubygems