Streaming live at 10am (PST)

Issues with cross-page section links and fixed nav bar

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:

  1. 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:

    image

  2. 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!


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

have you looked at this article, let me know if this helps :slight_smile:

Hi @IVG, thanks for responding. I did read that article earlier. I tried some of the suggestions, and found that setting the page sections to have positioning = relative helps them render above the nav bar when a nav link is clicked from the CMS page. But, then the nav bar isn’t visible at all (it’s hidden below the page section).

So, it seems like this flips this issue. Before, the top of the section was hidden. With relative positioning, the top part is visible, but the header can’t be seen.

can you try the following (maybe you already did then if so, please let me know)

so on the the home page link each link to relevant “section” (and add a section for home) (not the external links)
on the CMS Template link to external link and then use the relative reference links /#home, or /#portfolio… I think you will need to publish it to test it out…

Unfortunately I can’t test it since I can’t publish… if you make your page clonable I could try to play around and see if I can fix it

Hi @IVG - I just made the updates you suggested. The home page now has nav links that use the Section setting (instead of External URL).

For the CMS template, I detached the nav bar as a separate instance (it’s no longer linked to the nav bar symbol). The CMS template has nav links that are using External URL (entered as a relative reference: /#home, /#portfolio, etc.).

The result looks to be the same. The home page works well, but when I click a nav link on the CMS page, the result is still tucked under the fixed header.

Edit: I haven’t figured out how to make my page cloneable. Is it feasible on the free plan?

so to make it clonable you go to your project settings, turn on “showcase” and then edit the showcase settings to allow others to clone your website

Ah, it appears like I’d need a paid plan for that. I’m still on the free plan for now, so it doesn’t look like I can turn on cloning right now.

Thanks for working with me on this. Do you have other suggestions I could try? I think maybe I’ll have to go with a workaround by adding invisible div blocks that hold the section IDs, positioned a little bit above each section. That will probably break the nav link “active” state (blue highlighting), but I suppose that’s ok. I’m just a bit surprised because it seems like this is probably a fairly common use case.