Page Scroll-to Workflow From Dynamic Header

[brian]

We’re building a new feature that gives clients a landing page with 5-6 sections that they can customize. The header to the landing page allows users to scroll directly to a section, as any header on a one-page site would. That all tested well.

Then we had a new request: clients want to be able to hide sections if they don’t want to use them. That was easy using groups and conditions, but now we’re stuck with a question: how can we make our scrolling header dynamic as well?

In this example, a client wants to hide the “Schedule” section, which seems tricky given Bubble’s setup today. Here’s what we’ve tried and how it worked:

1. Making the header a continuous text string with “x” spaces between each word and bbcode links to each section. Unfortunately, it doesn’t look like Bubble allows the [jump] function in bbcode, which means we’d have to provide full URL links and refresh the page each time a user clicks.

2. We can make the individual text elements conditional on the section and change the text in each one (and the scroll-to conditional as well), but in doing that, it changes the width and the spacing between the words, which makes the header look oddly formatted.

Any tools I’m missing here? Ideally we’d be able to have a text string in a single text element that triggers scrolls to different elements on the page when different words in that text element are clicked.

If not, we’ll have to use a popover menu, which we already use on mobile, but those don’t feel like best practice in large screen headers in 2021.

[aschofer]

Thanks for the detailed post, Brian! One other workaround you might consider, although it wouldn’t necessarily be a better option than either of the two you are between, could be having a preset, properly spaced nav link group that conditionally becomes visible based on the user’s preferences and the current group becomes hidden. For example, if the user wants the schedule section hidden, conditionally hide the current navigation group and show a group in the header with properly spaced About - Links - Testimonial. This could be viable as it doesn’t appear that there would be too many permutations based on the sections in the screenshot, and you’d be able to use the same scroll to actions.

[brian]

Thanks @aschofer - that’s a good suggestion. We looked at that as an option as well, but there are actually a couple more options/sections and any section can be hidden, so even if we were only working with the header we posted and the order was fixed that would be 15 different headers we’d have to build and hide. Adding in a couple more, that becomes unmanageable pretty quickly.