Search code examples
javascripthtmlhelpndoc

How can I keep this navigation bar at the top when I scroll the page?

Link to page.

Code

<div class="navigation">
    <ol class="breadcrumb">
        <li><a href="msa-overview.html">Overview</a></li>
    </ol>
    <div class="nav-arrows">
        <div class="btn-group btn-group" role="group"><div class="btn-group"><button type="button" title="In this page..." class="btn btn-link dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="glyphicon glyphicon-option-horizontal" aria-hidden="true"></span></button><ul id="inline-toc" class="dropdown-menu dropdown-menu-right"><li><a href="#Quick_Start_Getting_Started">Quick Start - Getting Started</a></li><li><a href="#Step_1">Step 1</a></li><li><a href="#Step_2">Step 2</a></li><li><a href="#Step_3">Step 3</a></li><li><a href="#Step_4">Step 4</a></li></ul></div><a class="btn btn-default" href="msa-overview.html" title="Overview" role="button"><span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span></a><a class="btn btn-default" href="msa-overview.html" title="Overview" role="button"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span></a><a class="btn btn-default" href="msa.html" title="Using Meeting Schedule Assistant" role="button"><span class="glyphicon glyphicon-menu-right" aria-hidden="true"></span></a></div>
    </div>
</div>

Screengrab

enter image description here

Background

This website is built with HelpNDoc. I wanty to update my HTML building template so that this navigation bar floats at the top when you scroll the page. At the moment the navigation bar goes away.

If I understood what structural changes are needed in the HTML content then I will be able to modify my HelpNDoc HTML build template.

Update

Based on the answer provided I did some testing within the browser itself by changing the navigation bar element:

position: fixed;
background-color: #fff;

It looks like this:

enter image description here

It does stick at the top which is good but I have two questions now:

  1. How do we get the navigation arrows etc. to stay over on the right? Like they did before?

  2. In the answer it states:

add some padding to the header at the top of the page so that the navigation element does not overlap the page content.

Where do we add this pading exactly? And what value should we use? Since this help documentation can be viewed on varied screen sizes etc.

Solution

  • You can apply position: fixed to the navigation div, add background-color: #fff, and then add some padding to the header at the top of the page so that the navigation element does not overlap the page content.