intra nave-bar with fixed header Pure CSS Solution

by Sheryl Hohman

HTML

<div class="flex center j-around nav fixed">
<a href="#a1">Anchor 1</a>
<a href="#a2">Anchor 2</a>
<a href="#a3">Anchor 3</a>
<a href="#a4">Anchor 4</a>
<a href="#a5">Anchor 5</a>
</div>
<!--<div style="margin-top:90px; padding:20px;"> -->
<div id="top-of-page-content">
<!-- FYI text "hidden" by the header will be slightly visible, because the Header has a trabnsparancy setting  -->  
some intro text
</div>
<!-- "name" attribute is NOT supported in HTML5 for anchor tags <a> -->
<div class="item">
  <a  id="a1"></a>
  <h2>Title block 1</h2>
  <p>some text 1</p>
</div>
<div class="item">
  <a id="a2"></a>
  <h2>Title block 2</h2>
  <p>some text 2</p>
</div>
<div class="item">
  <a  id="a3"></a>
  <h2>Title block 3</h2>
  <p>some text 3</p>
</div>
<div class="item">
  <a  id="a4"></a>
  <h2>Title block 4</h2>
  <p>some text 4</p>
</div>
<div class="item">
  <a id="a5"></a>
  <h2>Title block 5</h2>
  <p>some text 5</p>
</div>

CSS

/* the following "magic numbers" must be the same for this to work
 -- <div style="margin-top: 55px>
 -- a[id] {
      padding-top: 55px;
      margin-top:  -55px;
    }
-- .fixed {
      height: 55px;
    }
-- #top-of-page-content {
      margin-top:55px; 
}
*/

a[id] {
  padding-top: 90px;
  margin-top: -90px;
  display: block;
}
#top-of-page-content {
  margin-top: 90px;
  padding: 20px; 
}
.fixed {
  position: fixed;
  top: 0;
  width: 100%;
  height: 90px;
  background: rgba(125,125,0,0.9);
  box-shadow: 2px 2px 3px gray
}
.item {
  height: 500px;
  border:1px dashed green; 
}

html,body {
  padding: 0;margin: 0;
}
// flex css extends
// flex box mixins for cross-browser support // (just used for styling - works fine without these import statements)
//@import "https://gist.githubusercontent.com/MrSwed/c5bc6107caf324f72d12/raw/9c25f5f598a7e4093f101ff0cdb76c4a444c8209/flexbox.less";
//@import "https://gist.githubusercontent.com/MrSwed/c5bc6107caf324f72d12/raw/9c25f5f598a7e4093f101ff0cdb76c4a444c8209/flexbox-extend.less";