Help with Internal Navigation in Product Landing Page

tlc35us · July 28, 2019, 11:32pm

(https://www.caktusgroup.com/blog/2017/10/23/css-tip-fixed-headers-and-section-anchors/)

NAILED IT!!!
That was a great article! And the solution is not that complicated, here it is if you want to take a look https://codepen.io/McFlacken/full/YmGNqR, the steps are quite easy:

set a parent container that contains (as siblings) one phantom anchor and the target you really intend to view. It has to be a positioned element, so the “phantom” tag can be positioned relative to it.

set the anchor tag with “&nbsp” inside and position it “absolute” to parent container and with a “top” offset = to the height of the header that you want to avoid.

Notes: I only fixed the first nav-link “Products”, the phantom anchor tag has a red solid border so it can be seen, the parent container has a red dotted border and the label that I want to not be covered by the header has a yellow dotted border.