1

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.

Andrew Truckle
  • 17,769
  • 16
  • 66
  • 164

1 Answers1

3

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.

see sharper
  • 11,505
  • 8
  • 46
  • 65
  • Thank you. I have taken a step firward now to some extent. But am not sure about the padding value to use (and where) ot how to push the arrows etc. back to the right. See updated question. Thank you. – Andrew Truckle Aug 05 '21 at 07:10
  • 1
    @AndrewTruckle because the position is fixed, the element no longer sizes to its parent. So you need to set its width to that of the container manually. As for the padding, the simplest thing is to put it on the h2 element; `padding-top:40px` works. But you may need to add a class so that you can style all the headers on similar pages the same way without messing with every h2 in the site. Or alternatively move the navigation out of the article (that seems correct to me anyway) and apply the padding to the article element. – see sharper Aug 05 '21 at 23:34
  • 1
    BTW, please mark this as answer if this sorts things out for you. – see sharper Aug 05 '21 at 23:35