How to approach reusable headers with dropdowns?

Need help App Organization
1

Hello all! I am currently using a reusable header element that I created on my pages. It’s only a height of 70px, but I had to make the reusable element a height of 370px because of the dropdown below it.

The problem this causes is that any buttons or links below this element (which has to be in front, because of the dropdown menu) cannot be clicked! I wanted to ask the forum, to see how you guys have handled this problem - I can’t be the first person to use a dropdown menu haha.

As an example, I cannot click the “Dashboard” breadcrumb link in the photo below, because of the dropdown.

image
image1479×508 106 KB

image
image1419×390 15.6 KB

Thanks!

P.S. @brentsum, I tried seeing how you did this in your Airbnb tutorial, but couldn’t see how you handled this - any ideas?

2

Hey @callen.hedglen :slight_smile: In the reusable header, I would change the dropdown menu to be a Groupfocus element (instead of a Group). This way, the reusable header will still be 70pixels in height on each page, but the groupfocus will show with the workflow (When Profile Picture is clicked --> Element Actions: Show GroupFocusA).

3 Likes
3

Ah-ha! Just learned about a new element haha. Thanks @fayewatson, that does the trick!

1 Like
4

Awesome! :slight_smile: No problem at all!

5

Can’t believe I haven’t seen the groupfocus element until now. Wow…Thanks @fayewatson :slight_smile:

2 Likes
6

No problem, @TechieInAK! :slight_smile: (I have those moments all the time, too!)

7

It’s actually quite the coincidence that I’m running into it now. Just a couple of days ago I was looking at a template someone else had made that used this element. I could see the tag in the code using Chrome inspector, I just couldn’t for the life of me remember seeing it in the Bubble editor…and then this thread pops up and there’s the answer. Funny how that works.

1 Like
8

Exactly! So neat when that happens, always just in time! :slight_smile:

1 Like