# Variable margin **URL:** \ **Category:** How do I?\ **Created:** [March 19, 2024, 12:05pm UTC](https://community.weweb.io/t/variable-margin/7640 "2024-03-19T12:05:23Z")\ **Posts on this page:** 13\ **Page:** 1
**Author:** ![Newtothis](https://avatars.discourse-cdn.com/v4/letter/n/7ba0ec/32.png) [@Newtothis](https://community.weweb.io/u/Newtothis)\ **Post date:** [March 19, 2024, 12:05pm UTC](https://community.weweb.io/t/variable-margin/7640/1 "2024-03-19T12:05:23Z")
Hi guys, i’m currently trying to have my content expand to fit the page when my side menu collapses. For some context i’ve created a collapsable side menu which is bound to a width variable, see image below. ![Screenshot 2024-03-14 at 13.56.25](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/7/785b42e439b49cc6b9ef1389d7623f46f720488f.png) ![Screenshot 2024-03-14 at 16.13.49](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/3/3cafe03bd0e43f820bd406cadc410a15e2dfe0e8.png) My issue is that i’m unable to get the content to expand (header and content containers) when the side bar is in it’s collapsed state. I’ve tried everything from creating a variable for the header and trying to bind it to the side menu’s collapsed state but it’s not functioning correctly ![Screenshot 2024-03-14 at 22.41.12](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/7/76f9577e2901ffaa984cb7bf2158bc5ce33ad3e6.png) ![Screenshot 2024-03-15 at 11.51.16](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/7/7982c5e20cbf8f71bed96fce785ebd62e03ea07d.png) The header also has a margin of 280px assigned to it too so i’m wondering if the issue is that I need a variable for the margin too? could someone give me some advice and examples of how to do this and ensure that when the header is expanded all of the internal div and search bar line up correctly as well as the margin. ---
**Author:** ![felipegranado](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/felipegranado/32/6306_2.png) [@felipegranado](https://community.weweb.io/u/felipegranado)\ **Post date:** [March 19, 2024, 12:20pm UTC](https://community.weweb.io/t/variable-margin/7640/2 "2024-03-19T12:20:30Z")
Hi @Newtothis ! How’re you? I’m doing this right now hahaha! If you are using an element that overlaps other elements (Drawer, Sidebar Menu…) you will need a variable to give margin to the left so that when the element is expanded the margin is placed at the same time. If the element is a common container, you can just work with a variable for the width of the container itself. To do this, the other container must be set to automatic width and sizing to “expanded”. ![Captura de tela 2024-03-19 091850](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/6/68f155793012b22a1d1fd6e6c4d3e44d3019254a.jpeg) If you need us, we are available! Best Regards, 🇧🇷 ---
**Author:** ![Newtothis](https://avatars.discourse-cdn.com/v4/letter/n/7ba0ec/32.png) [@Newtothis](https://community.weweb.io/u/Newtothis)\ **Post date:** [March 19, 2024, 12:28pm UTC](https://community.weweb.io/t/variable-margin/7640/3 "2024-03-19T12:28:33Z")
Hi Felipe! thanks for the advice, this has been killing me for the past couple of days hahaha. Is there any chance you could maybe make a short video when you have a moment explaining this please? I would really appreciate it, I learn better through visuals haha. thank you so much. ---
**Author:** ![felipegranado](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/felipegranado/32/6306_2.png) [@felipegranado](https://community.weweb.io/u/felipegranado)\ **Post date:** [March 19, 2024, 12:51pm UTC](https://community.weweb.io/t/variable-margin/7640/4 "2024-03-19T12:51:08Z")
Hi! [Loom - Left Menu Width!](https://www.loom.com/share/5c70c8d8a99642878b4f623a0ee5ef71?sid=312ea30c-1166-485f-9d9d-a1cfc2bb1d2c) ---
**Author:** ![Newtothis](https://avatars.discourse-cdn.com/v4/letter/n/7ba0ec/32.png) [@Newtothis](https://community.weweb.io/u/Newtothis)\ **Post date:** [March 19, 2024, 1:07pm UTC](https://community.weweb.io/t/variable-margin/7640/5 "2024-03-19T13:07:13Z")
Felipe, you are my hero! thank you so much 🙂 ---
**Author:** ![Newtothis](https://avatars.discourse-cdn.com/v4/letter/n/7ba0ec/32.png) [@Newtothis](https://community.weweb.io/u/Newtothis)\ **Post date:** [March 19, 2024, 1:37pm UTC](https://community.weweb.io/t/variable-margin/7640/6 "2024-03-19T13:37:32Z")
Hi Felipe! I think my issue is that the side bar expansion is done with one icon, here’s a video to showcase what’s happening. https://www.loom.com/embed/df43054565f9487bb1f6c9e122c47396?sid=0e149a88-5b2d-488c-b57b-84555593e45b ---
**Author:** ![Fix](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fix/32/8212_2.png) [@Fix](https://community.weweb.io/u/Fix)\ **Post date:** [March 19, 2024, 1:45pm UTC](https://community.weweb.io/t/variable-margin/7640/7 "2024-03-19T13:45:52Z")
Hi @Newtothis , I see you have a max width on the two element, remove it and give it a try ? ---
**Author:** ![Newtothis](https://avatars.discourse-cdn.com/v4/letter/n/7ba0ec/32.png) [@Newtothis](https://community.weweb.io/u/Newtothis)\ **Post date:** [March 19, 2024, 1:51pm UTC](https://community.weweb.io/t/variable-margin/7640/8 "2024-03-19T13:51:21Z")
I have tried that and it’s still not working, i’m wondering if it’s the variables i’ve created? ---
**Author:** ![Fix](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/fix/32/8212_2.png) [@Fix](https://community.weweb.io/u/Fix)\ **Post date:** [March 19, 2024, 2:07pm UTC](https://community.weweb.io/t/variable-margin/7640/9 "2024-03-19T14:07:14Z")
Ok sorry I didn’t first see also the margin size but for the margin you should bind : ```auto "0 0 0" + if(sidebar expansion = true, menuWidth.expanded+"px", menuWidth.collapsed+"px") ``` This will change the margin dynamically And Unbind the width also ---
**Author:** ![felipegranado](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/felipegranado/32/6306_2.png) [@felipegranado](https://community.weweb.io/u/felipegranado)\ **Post date:** [March 19, 2024, 2:37pm UTC](https://community.weweb.io/t/variable-margin/7640/10 "2024-03-19T14:37:22Z")
Hi, Follow video… [Left Menu (Side Menu)](https://www.loom.com/share/6fb4351f44f94c6f8455e90ae89df3db?sid=9b69aaef-fa6e-4985-9f53-594792b5ec29) Basically you will change the concept: instead of moving the width of the menu, you will alternate between opening and closing the menu and at the same time adding and removing the margin on the main element. You can do this only on the parent element (section), as you are using an element that overlaps the other elements, which is why you need to make the margin dynamic. DISCLAIMER: In the video, the margin is set to 0px and closing the Side Menu. In your case, you just need to set the variable to 80. ---
**Author:** ![Newtothis](https://avatars.discourse-cdn.com/v4/letter/n/7ba0ec/32.png) [@Newtothis](https://community.weweb.io/u/Newtothis)\ **Post date:** [March 19, 2024, 3:00pm UTC](https://community.weweb.io/t/variable-margin/7640/11 "2024-03-19T15:00:40Z")
thank you so much man! ![Screenshot 2024-03-19 at 14.59.59](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/1/101b65f7e6b7ea1be4b3b6f0468dc60253b02840.png) ![Screenshot 2024-03-19 at 15.00.06](https://us1.discourse-cdn.com/flex016/uploads/weweb/original/2X/b/b39e1e70820663f1cbf0dc979359a9555ac91fda.png) ---
**Author:** ![Newtothis](https://avatars.discourse-cdn.com/v4/letter/n/7ba0ec/32.png) [@Newtothis](https://community.weweb.io/u/Newtothis)\ **Post date:** [March 19, 2024, 3:01pm UTC](https://community.weweb.io/t/variable-margin/7640/12 "2024-03-19T15:01:01Z")
thank you so much for the help Felipe, it’s functioning as expected! ---
**Author:** ![Iseoluwa\_Ola](https://sea2.discourse-cdn.com/flex016/user_avatar/community.weweb.io/iseoluwa_ola/32/12854_2.png) [@Iseoluwa\_Ola](https://community.weweb.io/u/Iseoluwa_Ola)\ **Post date:** [January 11, 2025, 7:36am UTC](https://community.weweb.io/t/variable-margin/7640/13 "2025-01-11T07:36:01Z")
Thanks for this help, but please can you record the video with sound. I will appreciate if you can do so thanks.