Side Nav on Mobile

Need help Responsiveness
1

Looking to create a side menu that appears and animates over existing page content.

I’ve rolled-my-own side nav by creating a Repeating Group with Dynamic Text that Shows and Animates Left_In when the Hamburger Button is Clicked. This way I can populate the menu items’ vertical rows with changing content. User clicks on the hamburger, menu appears and animates in. Click on it again, menu animates out and disappears.

However, when I experiment with screen sizes my RG, although hidden, maintains it’s space on the page. I end up with a white space (where the hidden menu resides) that the rest of the page bunches up against.

Is there a way to hide my menu group so that other content can use it’s space and the group only appears when called? Or a better approach for this? I’m really just trying to accomplish creating a dynamic side menu that looks great on both desktop and mobile.

Thanks!

2

There’s a plugin called “Slideable Menu”

It’s always the first thing I install in any app - it really should come standard.

Anyways, I’ve never put dynamic content in one but I’m guessing that’s no issue.

3

Thanks for the response, @skylershelton. I’ve tried that plugin, however, and it’s got some limitations with dynamic content (forum link . Sounds like their doing some updates to it in the future, but for right now it’s pretty limited.

4

Figured it out. States and ‘hides’. States can send data to any groups that you might be using as a hide/reveal ‘page’, hiding them and sorting through the layer will take care of visuals for the end user. Makes things a bit more difficult to keep track of when constructing, but allows for a great product at the end. Thanks Bubble!