Menu - 2 floating groups HOW to make REUSABLE?

Need help
1

I made a menu I am happy with
(please tell me if I did it wrong, or it isn’t the best practice!)

consists of two floating groups - one is floating burger icon

how do i convert it so I can use it on all other pages? where am I making a mistake?

UPDATE can’t convert toi reusable element - losing conditions and then if fixing it, can’t make element visible on page load as it created a big white block

s2
s21037×505 78.3 KB
s1
s1714×389 15.6 KB

2

You can convert any element into a reusable element by ‘right-clicking’ on the element and selecting ‘convert into a reusable element’

image
image319×533 35.4 KB

3

I am doing it but I am losing the states? How do i avoid losing them?

as this way I need to redo it every time when i copy the element to new page?

4

replied above

5

it doesn’t work as only burger needs to be visible on page load but if I turn it off, then i have a big white block on the left

6

Keep using a floating group with the state. Just place the new reusable element inside the page’s floating group.

7

I am not sure I quite understand, can you explain it like I am 5 please and I will recreate it?

Honestly this menu is making me cry right now lol

8
  1. Build a reusable element from scratch
  2. Place a floating group on your page
  3. Add the reusable element inside the floating group
  4. Show/hide the floating group with the state method that you are using
9

how can i show hide it if it happens when clicked on burger and it is inside a reusable menu?

Do i need to move burger somewhere else?

10

also I can’t seem to put a reusable element inside the floating group? It just doesn’t go inside of it?

11

Build the reusable element without a floating group there.

Use a floating group on your page

Insert the reusable element inside the floating group of the page

Show/hide the floating group using your custom states isshowing method

12

4
4644×685 53.3 KB

how do you put it in the floating group on the page? it doesn’t work?
I don’t know what I am doing wrong eh

13

Perhaps the reusable element was made as a floating group.

I thought you said you could build it again not as a floating group.

The method I am suggesting is precisely so that you can insert a group inside a floating group. In this case this group is a reusable element.

14

yes that’s what I did - reusable element just as a group, not floating group? the pink menu is just a group

I am really confused

15

I recorded a short video

16

oh my god, you truly are an angel! Thank you so much for taking time and making a video, sooo helpful!

Method definitely works!

my only concern is the fact that this way I will need to rebuild icon and floating group on each page I need a menu on.

Seems like maybe a focus group in the header can be brilliant if we need to have this functionality on every page. I managed to do it with a focus group. what do you think?

17

  1. Why should it be a concern to have an FG in every page? The reusable element is where you will place the logic. This way you only have to worry about only one place where that logic resides.

  2. Great job on the header

Good luck with the rest of your project! :slight_smile:

18

  1. I meant I will need to create a burger on every page again, as well as a floating group?

  2. Thank you so much I will need a lot of it! How long have you been working with bubble? Can’t wait to be at this level too!

19

Since 2016 and learning everyday as well :sweat_smile: