Drop 'up' menu from bottom floating group

I am working on the mobile view of my app.

I have a floating group aligned to bottom with 5 links. One of the links is “Show more” which needs to reveal more links when clicked (in a new group).

The ‘Show more’ menu opens fine but instead of popping up (above the link), it pushes everything down. Is there a best practice for dealing with this scenario?

Floating group

And when I click on ‘More’ the 5 links get pushed down to reveal the popup box, but I want the links to remain in place and for the popup box to open above the links!

My best solution for the bottom nav bar for now is to put the popup box (orange) in a group which does not collapse when hidden. The orange boxes are only shown when a link icon is clicked. This means the popup opens above the link correctly but it also means the bottom nav bar needs to be extra tall.

Hey Darren!

I think this would be the best use-case of a GroupFocus - which you can set the X and Y offset to display above the buttons.

Try to play with Group Focus’ and if you need any further help just let me know!


Yep use groupFocus. Set the reference element as the “More” icon or text with some “-Y” padding.

Learn no code → nocodify.com

1 Like

Thanks guys, I should have mentioned that my footer nav is created as a reusable element and then put inside a floating group. So, the floating group is put on each page, but the reusable element (with nav links) is a reusable element so your solution won’t work in this case because I can’t make the GroupFocus reference a reusable element.

The only reason my footer nav is created as a reusable element is because it’s easier to update links globally if needed. I may have to drop that idea and create the nav links on each page.

You can put your Group Focus inside your re-usable element, and that should solve that problem.

That has the same result as if I use a standard group, it requires that the repeatable element is extra tall (in order to fit the GroupFocus inside).

You’ll have to make it tall at first, for the design aspect, but then just shorten the height back up.

It’s totally possible, here is a quick example:

Shoutout to Frames for the quick landing page design

You can view the editor here:

The reusable element is “Footer-Nav” and the page it’s on is the one that’s linked.

1 Like

When I do this my nav links disappear below the fold. It’s as though shortening the repeatable element (which is inside a floating group) simply pushes it down.

I checked out the quick landing page design but I don’t see any footer nav links?

I just put a button on the “footer” that says click me - That’s my makeshift example footer.

Your button is viewable in the editor but not viewable in preview mode? Sorry, I appreciate your help but I can’t see it.

That is weird.

There is how it looks, I was able to use a Group Focus in the reusable element successfully without changing the height or width of the element itself.

Very weird, I really don’t see it. But, I am going to look at how you did it and try. Will update! Thank you.

1 Like

OK, I see what you did and I think it ‘appears’ to work but if you create a horizontal line and have your button flush underneath that line, you will see that there is a white space created above it which is the size of your text box.

I have the Group Focus flush under the white page border as below.

But it displays like this;

Screenshot 2021-09-17 172554

All this said, I think the Group Focus has one very good advantage over a normal group in that if it overlaps any text links, those links still work. This means I can allow the Group Focus to be high and eat into my page because it won’t prevent anything else from working. So, thank you for the heads up on Group Focus as I hadn’t used them before!

hi guys.

I’d like to know something about the floating group like a menu on the bottom.

Is it possible to hide it when we’re scrolling on the web page ?

Thank for your help

The whole idea of a floating group is that it is always visible. But if you do want it hidden on page scroll, you may be able to use a condition for When Current page scrolling position and then see if you can set it to hide when scrolling position is below a certain amount.

My bottom mobile menu (floating group) is doing the opposite. It’s hidden unless you scroll down. I can’t figure out why or how to get it to stop. It’s driving me nuts!

Do you want it to always show? If so, make sure you have the This element is visible on page load check box ticked.