# Responsive sidemenu

**URL:** <https://community.weweb.io/t/responsive-sidemenu/1810>\
**Category:** How do I?\
**Created:** [February 5, 2023, 3:18am UTC](https://community.weweb.io/t/responsive-sidemenu/1810 "2023-02-05T03:18:38Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![IdeaGarage](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/ideagarage/32/1350_2.png) [@IdeaGarage](https://community.weweb.io/u/IdeaGarage)\
**Post date:** [February 5, 2023, 3:18am UTC](https://community.weweb.io/t/responsive-sidemenu/1810/1 "2023-02-05T03:18:38Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![luka](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luka/32/1571_2.png) [@luka](https://community.weweb.io/u/luka)\
**Post date:** [February 6, 2023, 9:59am UTC](https://community.weweb.io/t/responsive-sidemenu/1810/2 "2023-02-06T09:59:58Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![IdeaGarage](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/ideagarage/32/1350_2.png) [@IdeaGarage](https://community.weweb.io/u/IdeaGarage)\
**Post date:** [February 7, 2023, 11:48am UTC](https://community.weweb.io/t/responsive-sidemenu/1810/3 "2023-02-07T11:48:09Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![luka](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luka/32/1571_2.png) [@luka](https://community.weweb.io/u/luka)\
**Post date:** [February 7, 2023, 12:48pm UTC](https://community.weweb.io/t/responsive-sidemenu/1810/4 "2023-02-07T12:48:52Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![IdeaGarage](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/ideagarage/32/1350_2.png) [@IdeaGarage](https://community.weweb.io/u/IdeaGarage)\
**Post date:** [February 8, 2023, 12:08am UTC](https://community.weweb.io/t/responsive-sidemenu/1810/5 "2023-02-08T00:08:47Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![avm](https://avatars.discourse-cdn.com/v4/letter/a/ba9def/32.png) [@avm](https://community.weweb.io/u/avm)\
**Post date:** [March 12, 2023, 6:32am UTC](https://community.weweb.io/t/responsive-sidemenu/1810/6 "2023-03-12T06:32:14Z")

</div>

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

 ![image](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/a/a3a336ae7dc10d0283475e06f36573440e547449.jpeg)

---

<div class="post-metadata">

**Author:** ![luka](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/luka/32/1571_2.png) [@luka](https://community.weweb.io/u/luka)\
**Post date:** [March 13, 2023, 10:35am UTC](https://community.weweb.io/t/responsive-sidemenu/1810/7 "2023-03-13T10:35:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![avm](https://avatars.discourse-cdn.com/v4/letter/a/ba9def/32.png) [@avm](https://community.weweb.io/u/avm)\
**Post date:** [March 14, 2023, 3:54pm UTC](https://community.weweb.io/t/responsive-sidemenu/1810/8 "2023-03-14T15:54:08Z")

</div>

Thanks, this makes sense
