How to create a full width megamenu?

Hi all, does anyone know how they would go about creating a mega menu? This is generally a pretty standardised type of desktop navigation within marketplaces and e-commerce (well web design period I guess).

I have tried

  • To use a Focus Group, but the offset settings doesn’t allow it to be full width 100% to the page settings and responsive to it.
  • Floating group doesnt stick to the parent element and will scroll down the page so is not a viable option.
  • Hide/Shoe element within the header but this will push down the page content below it which is not optimal.

I should be able to click on header menu navigation option and show a full width sub menu which is, anyone have any ideas on how to achieve this in Bubble?

Many thanks.

Can you explain what you mean by that? (maybe some screenshot or a link to your preview or editor)…

As I’m able to do that with no issue, so I’m not sure what you mean when you say it doesn’t allow the focus group to be 100% width (it does for me)…

Hi Adam, screenshot attached hope this demonstrates the issue. Also included example of what I am trying to achieve.

In editor, 100% taking it over the pages width:

In preview is not within the page:

Example of mega menu structure I am trying to achieve:

What is your group focus reference element? (and have you set any offsets?)

Dropdown 1

Dropdown 1

That’s your issue then…

If you want it full width your reference element needs to be the header or the menu (not an element within it)

Great, thanks. Yes I got confused when I set up the workflow to trigger off the nav text and repeated it for the reference. Thanks for the quick responses & solution!

1 Like

Only downfall of this by the looks of it is that the Focus Group does not stay a part of a reusable element. So I would need to repeat this and it’s workflows for every instance I have of the header/navigation i.e. I cannot actually use this as a reusable element. Unless there is a solution I don’t know of here. Happy to create separate thread.

I’m not sure what you mean by “the Focus Group does not stay a part of a reusable element.”

It should be perfectly possible to have a group focus inside a reusable element, so I don’t understand the issue… maybe some screenshots, or links to your editor would help clarify your issue…

I hope so. Apologies only been using Bubble for a few days. Used to other no-code tools so have yet to work everything out.

This is my reusable element with the main navigation created within a Group and then my GroupFocus element (megamenu) which sits outsite of it:
Screenshot 2022-09-03 at 18.13.07

As soon as I add the reusable element (navigation) into a page the group is no longer there. I appreciate the reusable element doesnt show all of its componenets when added to a page but when I go into preview mode to test out the toggle to reveal the megamenu it does not work.
Screenshot 2022-09-03 at 18.13.39

Hope this explains the issue being experienced. But again, as new to Bubble, I could be missing something here. Thanks.

@adamhholmes I figured out the issue I think, so yes all group elements are usable within the reusable element. But the issue I have found is that the Floating Group or Focus Group elements height will be restricted to the Reusable Element rather than the page.

This topic was automatically closed after 70 days. New replies are no longer allowed.