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