Responsive sidemenu

Hello community,
When I use Responsive Sidemenu from default UI kit, it seems to be different from normal Section.
I want to set center layout, so I add a container in the Sidemenu and set width(max and min). But it seems the width is still full-screen.
How can I set width of inner container?

Do you want to place the menu in the center of the screen or center the content inside the menu?

1 Like

I want to place a container in the center of the screen, and in this container, place the menu left side and main content right side.

The easiest way to achieve this is to use Columns or Flexbox inside a centered container. You can copy the menu content from ‘Responsive Sidemenu’ → ‘Menu’ → ‘Content’. So basically you shouldn’t use the whole element from the UI kit, only the menu and build your own layout.

If you want to use linked sections you would need some custom CSS, but I will update you here if we decide to add it to our UI kit.

1 Like

Thanks for your kindly support!
I tried and successfully built my ideal layout including the menu handy.

WeWeb opens the future of development, gives more speed end efficient to developers!

3 Likes

Can you advise how to make this layout responsive? I guess I could use a variable to bind the margin of the container adjacent to the side menu to handle the margin adjusting back to zero when the sidebar is collapsed. But wasn’t sure if there was a better practice in a “weweb” way

Did I understand correctly that you’re trying to make a collapsed state of the sidemenu? If so, you need to make a boolean variable that will control whether your sidemenu is collapsed or not. Once you do that, you need to bind the: a) size of the sidemenu and b) right margin of the content section to different values depending on the value of the variable

Thanks, this makes sense