Sticky Tab Navigation
Sticky or Scroll & Stick
The navigation consists of inline tab links. It can accomodate up to fourteen links. The last two links can be configured as external links and open in a new windwo if required.
The navigation is full width, responsive so that when the browser or device width gets narrow, the tabs will return to another line. If viewing this page on a computer, reduce the browser width to see this change.
The menu can be used as an inline navigation - either fixed in position or to scroll with the page content and then fix itself at a predetermined distance from the top of the browser or device window. Scroll this page to see the latter option in action.
The navigation itself can have a background color with adjustable opacity. In this case, the opacity is set to zero.
The tabs have a separate control for background color and the opacity of this can be adjusted too.
The tabs can use a web safe font or a non web safe or Google hosted font with a web safe fallback. There are controls for font size, color, hover color and hover background color.
There is a control for setting the border radius and for adjusting the top/bottom and left/right padding. There is also a minimum width control for forcing the tabs to be equal width if required.
There are two controls for adjusting spacing. The first is to adjust the horizontal spacing between the tab and the second for adjusting the vertical spacing between the rows when the tabs returns to a second line at narrower browser or screen widths.
For scroll and then stick, set the value for "Position Top" to the distance from the top where the menu will stick. Position the navigation on the page were it will appear on page load.
For a sticky menu, position the navigation where required, leave the value for "Position Top" at zero and check the "Sticky" box.
To make sure the navigation sits above all the other items in the stacking order, select it and choose "Always On Top" in the Arrange menu or check the appropriate box in the Metrics inspector.