23
Let’s look at how it starts:
<header id="js--000000"> <!-- ********************************************************************** [WP TOPNAV] TOP NAVIGATION (ABOVE CONTENTS LIST) *******************************************************************--> <nav class="nav-cover"> <!-- Start of top navigation bar --> <div class="top-nav"> <!-- Start of top navigation row --> <div class="rg-row"> <!-- Start of navigation button row --> <!-- Button 01 - Previous Section --> <div class="nav-wide" ></div> <!-- Button 02 - Previous Chapter --> <div class="nav-wide" ></div> <!-- Button 03 - Home wide (hidden when fixed nav activates) --> <div class="nav-wide nav-home" ></div> <!-- Button 03a - Top narrow (hidden until fixed nav starts) --> <a class="nav-narrow js--sc-000000" href="#"><span class="top-nav-icon">t</span><span class="top-nav-text">Top</span></a> <!-- Button 03b - Home narrow (hidden until fixed nav starts) --> <div class="nav-narrow"></div> <!-- Button 04 - Next Chapter --> <a class="nav-wide" href="01-00-introduction.html#js--000000"><span class="top-nav-text">Next chapter</span><span class="top-nav-icon">d</span></a> <!-- Button 05 - Next section --> <a class="nav-wide" href="01-00-introduction.html#js--010000"><span class="top-nav-text">Next section</span><span class="top-nav-icon">r</span></a> </div> <!-- End of navigation button row --> </div> <!-- End of top navigation row --> </nav> <!-- End of top navigation bar --> <!-- ====================================================================== [WP END] -->
This compares with a navigation bar from a normal page:
<header id="js--000000"> <!-- ********************************************************************** [WP TOPNAV] TOP NAVIGATION (ABOVE CONTENTS LIST) *******************************************************************--> <nav> <!-- Start of top navigation bar --> <div class="top-nav"> <!-- Start of top navigation row --> <div class="rg-row"> <!-- Start of navigation button row --> <!-- Button 01 - Previous Section --> <a class="nav-wide" href="98-00-blank.html#js--000000"><span class="top-nav-icon">l</span><span class="top-nav-text">Prev. section</span></a> <!-- Button 02 - Previous Chapter --> <a class="nav-wide" href="98-00-blank.html#js--000000"><span class="top-nav-icon">u</span><span class="top-nav-text">Prev. chapter</span></a> <!-- Button 03 - Home wide (hidden when fixed nav activates) --> <a class="nav-wide nav-home" href="index.html#js--000000"><span class="top-nav-text">Home</span><span class="top-nav-icon">h</span></a> <!-- Button 03a - Top narrow (hidden until fixed nav activates) --> <a class="nav-narrow js--sc-000000" href="#"><span class="top-nav-icon">t</span><span class="top-nav-text">Top</span></a> <!-- Button 03b - Home narrow (hidden until fixed nav activates) --> <a class="nav-narrow" href="index.html#js--000000"><span class="top-nav-text">Home</span><span class="top-nav-icon">h</span></a> <!-- Button 04 - Next Chapter --> <a class="nav-wide" href="#js--000000"><span class="top-nav-text">Next chapter</span><span class="top-nav-icon">d</span></a> <!-- Button 05 - Next section --> <a class="nav-wide" href="#js--000000"><span class="top-nav-text">Next section</span><span class="top-nav-icon">r</span></a> </div> <!-- End of navigation button row --> </div> <!-- End of top navigation row --> </nav> <!-- End of top navigation bar --> <!-- ========================================================================== [WP END] -->
The first change is to the <nav> element itself, on the landing page the <nav> element has been given the class nav-cover, this has the CSS:
.nav-cover { display: none} /* Hide top nav bar on cover page */
This sets the navigation bar to be invisible, it just is doesn’t show up at all on the page.
The sticky nav stuff still works, when the ID js--fixed-nav reaches the top of the screen, the whole sticky navigation effect kicks in and the navigation bar is displayed (the nav-cover class is overruled).
This time though the navigation bar has been tweaked to remove the links we don’t want. This is done directly in the HTML.
A typical navigation bar has seven buttons all with links of some description:
Button 1 — Previous section (wide button)
Button 2 — Previous chapter (wide button)
Button 3 — Home (wide button)
Button 3a — Top (narrow button)
Button 3b — Home (narrow button)
Button 4 — Next chapter (wide button)
Button 5 — Next section (wide button)
When the sticky navigation activates, the wide button 3 is replaced with the narrow buttons 3a and 3b.
In the case of the landing page, we don’t want buttons 1, 2, 3 or 3b. When I say we don’t want the buttons, we want to keep the physical boxes, but we don’t want any text or clickable links in them.
To do this, I’ve simply replaced each anchor element for buttons 1, 2, 3 and 3b with an empty div element with the same classes.
Thus the original button 1:
<!-- Button 01 - Previous Section --> <a class="nav-wide" href="98-00-blank.html#js--000000"><span class="top-nav-icon">l</span><span class="top-nav-text">Prev. section</span></a>
Becomes:
<!-- Button 01 - Previous Section --> <div class="nav-wide" ></div>
The same is true for the other empty buttons:
<!-- Button 02 - Previous Chapter --> <a class="nav-wide" href="98-00-blank.html#js--000000"><span class="top-nav-icon">u</span><span class="top-nav-text">Prev. chapter</span></a> <div class="nav-wide" ></div> <!-- Button 03 - Home wide (hidden when fixed nav activates) --> <a class="nav-wide nav-home" href="index.html#js--000000"><span class="top-nav-text">Home</span><span class="top-nav-icon">h</span></a> <div class="nav-wide nav-home" ></div> <!-- Button 03b - Home narrow (hidden until fixed nav activates) --> <a class="nav-narrow" href="index.html#js--000000"><span class="top-nav-text">Home</span><span class="top-nav-icon">h</span></a> <div class="nav-narrow"></div>
The red is the typical link, the green is the same link modified for the landing page.
In all cases, the anchor is replaced with an empty div that has exactly the same classes.
These div elements just show as empty boxes of the correct with and in the correct positions.