I have a home page with sections, and three CMS pages. The nav bar is fixed (top), with links that point to sections on the home page.
For the nav links, I’m using External URL and I’ve entered each using a relative reference, e.g.
/#portfolio is referencing the Portfolio section of the home page.
I can’t get the nav links to behave well on both the home page and the CMS pages. My issues:
On the home page, nav links work perfectly. On a CMS page, nav links take me to a section of the home page, but the section is tucked under the fixed header. The home page doesn’t have this issue; it’s “aware” of the fixed header because the scroll offset is on, i.e. I’ve left this box unchecked:
On a CMS page, the Contact nav link behaves inconsistently. It works 80% of the time. For the other 20%, it takes me to roughly the right area, but it’s vertically off by ~200-300px.
I’ve read several threads on section links, and several others on fixed headers. Here are some ideas, but they both have caveats:
A. I could turn off the scroll offset (so that the header overlaps the section content in every case). Then, I could use a workaround for the anchors, like placing an invisible div ~100px above the start of each section. But, I’ve experimented with this and it throws off the “active” state of the nav links. They currently turn blue when the user is in the related section.
B. I could add extra padding at the top of each section, and allow the header to overlap this extra space. But, this doesn’t look great.
Any ideas? Here is my live site, since that’s probably easier to use for section links than the read-only version. Thank you!