Create two bars, both Stick-at-Top. The Page-width Bar must be brought to the front with the Full-Width Stretch Bar sent to the back. These bars site below the overlay menu bar. On the underlying slim page-width menu bar, create individual buttons of choice and make all elements Stick-at-Top. In this example, an old school demo from a while back, the Stick-at-top buttons have a transparent rectangle (as padding) to position them from the very top of the page; one could also use a vertical text offset with plain text links. Add an overlay menu bar; in this example it has flyaway buttons for navigation. The “flyaway” buttons can have the same links as the underlying buttons, or be different if the design requires it. All this works because (1) Stick-at-Top elements do not come to the front, whereas any Sticky elements do and (2) the two bars are necessary to manage the way elements scroll under a stick-at-top bar.

Page Width Bar Bring to Front

This overlay menu bar and fly away buttons scroll out of view to reveal a slimmer height menu