Forum Documentation Showcase Pricing Learn more

Hero button not clickable due to header's hidden responsive menu


#1

Hi,

I have a floating header with height of 70px. When the page width shrinks below 860px, a responsive “hamburger” menu icon appears. When that icon is clicked, a responsive menu appears below the header (it’s a Group element) and fills the rest of the window. I am basically trying to replicate the responsive menu found here: https://www.chromeindustries.com/ (without the fancy scroll transition)

I have tried to replicate (and simplify) the issue here: https://responsive-menu-test.bubbleapps.io/version-test

As the example shows, the hero button is not clickable. But If I make the responsive menu (the yellow group that appears after clicking hamburger icon) much shorter, the hero button becomes clickable.

How can I have a hidden responsive menu that covers the full width and height of the window when the hamburger icon is clicked and still have a clickable hero button?

I believe this post describes the same problem: Incredibly simple button not registering clicks (and yes it is clickable)

Thanks,
Tim


#2

Hey Tim - it sounds like you’re using a group in a situation where you should use a group focus.

A group is going to have a fixed height and, consequently, will lay on top of the other elements on the page. (Even if you created your header as a reusable element then subsequently dropped it on a page and set the height to 70px, it would still not process correctly).

A group focus employs a similar hide/show process for showing the group. (A group focus, by default is not visible while a group itself is visible).

You may find a handful of helpful hints in this lesson on LearnTo about how to create a header (the lesson also serves as an intro to reusable elements).


Dan (creator of LearnTo - 15+ hours of Bubble tutorials and live coaching)


#3

Thanks Dan! That is indeed the solution. Appreciate the help.