# Hamburger Tree menu position on a high def screen

**URL:** <https://forums.realmacsoftware.com/t/hamburger-tree-menu-position-on-a-high-def-screen/51648>\
**Category:** Elements\
**Created:** [October 10, 2025, 6:00pm UTC](https://forums.realmacsoftware.com/t/hamburger-tree-menu-position-on-a-high-def-screen/51648 "2025-10-10T18:00:49Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![jwDave](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jwdave/32/31841_2.png) [@jwDave](https://forums.realmacsoftware.com/u/jwDave)\
**Post date:** [October 10, 2025, 6:00pm UTC](https://forums.realmacsoftware.com/t/hamburger-tree-menu-position-on-a-high-def-screen/51648/1 "2025-10-10T18:00:50Z")

</div>

Dan very kindly provided an example of setting up a hamberger tree menu. This works great with one issue I cannot resolve.

When you press the menu button the tree opens at the extreme right side of the browser (I have set the button to be on the right of the site) regardless of the width of the website. So on a large def screen the tree menu opens a long way away from the page. Does anyone know how to force it to open within the constraints of the container that it is in?

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [October 10, 2025, 6:51pm UTC](https://forums.realmacsoftware.com/t/hamburger-tree-menu-position-on-a-high-def-screen/51648/2 "2025-10-10T18:51:05Z")

</div>

is this what you mean

---

<div class="post-metadata">

**Author:** ![differentdan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/differentdan/32/33530_2.png) [@differentdan](https://forums.realmacsoftware.com/u/differentdan)\
**Post date:** [October 10, 2025, 7:02pm UTC](https://forums.realmacsoftware.com/t/hamburger-tree-menu-position-on-a-high-def-screen/51648/3 "2025-10-10T19:02:41Z")

</div>

Or something like this?

![slide-out-menu](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/4/c/4c88cd845877d467b0d82002601a16c991792f1d.gif)

---

<div class="post-metadata">

**Author:** ![jwDave](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jwdave/32/31841_2.png) [@jwDave](https://forums.realmacsoftware.com/u/jwDave)\
**Post date:** [October 10, 2025, 7:39pm UTC](https://forums.realmacsoftware.com/t/hamburger-tree-menu-position-on-a-high-def-screen/51648/4 "2025-10-10T19:39:03Z")

</div>

This is what I am after I think. To clarify, it was the Steve W version I am trying to make.

---

<div class="post-metadata">

**Author:** ![jwDave](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jwdave/32/31841_2.png) [@jwDave](https://forums.realmacsoftware.com/u/jwDave)\
**Post date:** [October 11, 2025, 10:30am UTC](https://forums.realmacsoftware.com/t/hamburger-tree-menu-position-on-a-high-def-screen/51648/5 "2025-10-11T10:30:45Z")

</div>

Yes this what I am after, so what are the settings?

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [October 11, 2025, 10:45am UTC](https://forums.realmacsoftware.com/t/hamburger-tree-menu-position-on-a-high-def-screen/51648/6 "2025-10-11T10:45:01Z")

</div>

[elementsapp://downloadDocument/oQRKBPnaQxyw](elementsapp://downloadDocument/oQRKBPnaQxyw)

Basic setup

---

<div class="post-metadata">

**Author:** ![jwDave](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jwdave/32/31841_2.png) [@jwDave](https://forums.realmacsoftware.com/u/jwDave)\
**Post date:** [October 11, 2025, 11:04am UTC](https://forums.realmacsoftware.com/t/hamburger-tree-menu-position-on-a-high-def-screen/51648/7 "2025-10-11T11:04:45Z")

</div>

Many thanks

---

<div class="post-metadata">

**Author:** ![jwDave](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jwdave/32/31841_2.png) [@jwDave](https://forums.realmacsoftware.com/u/jwDave)\
**Post date:** [October 11, 2025, 5:05pm UTC](https://forums.realmacsoftware.com/t/hamburger-tree-menu-position-on-a-high-def-screen/51648/8 "2025-10-11T17:05:51Z")

</div>

Sorry, I tried all your settings and none stopped this behaviour. See video

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [October 11, 2025, 5:13pm UTC](https://forums.realmacsoftware.com/t/hamburger-tree-menu-position-on-a-high-def-screen/51648/9 "2025-10-11T17:13:09Z")

</div>

If you share your project via Elements Cloud we could probably work out the setting you need 🙂

---

<div class="post-metadata">

**Author:** ![jwDave](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jwdave/32/31841_2.png) [@jwDave](https://forums.realmacsoftware.com/u/jwDave)\
**Post date:** [October 11, 2025, 5:20pm UTC](https://forums.realmacsoftware.com/t/hamburger-tree-menu-position-on-a-high-def-screen/51648/10 "2025-10-11T17:20:25Z")

</div>

Thanks, done…

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [October 11, 2025, 5:27pm UTC](https://forums.realmacsoftware.com/t/hamburger-tree-menu-position-on-a-high-def-screen/51648/11 "2025-10-11T17:27:32Z")

</div>

Great, but you’re going to need to share the link with us…

---

<div class="post-metadata">

**Author:** ![jwDave](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jwdave/32/31841_2.png) [@jwDave](https://forums.realmacsoftware.com/u/jwDave)\
**Post date:** [October 11, 2025, 5:42pm UTC](https://forums.realmacsoftware.com/t/hamburger-tree-menu-position-on-a-high-def-screen/51648/12 "2025-10-11T17:42:45Z")

</div>

Sorry, it is in the project settings but maybe they don’t get shared, now shared via cloud menu.

---

<div class="post-metadata">

**Author:** ![dan](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dan/32/28516_2.png) [@dan](https://forums.realmacsoftware.com/u/dan)\
**Post date:** [October 11, 2025, 8:15pm UTC](https://forums.realmacsoftware.com/t/hamburger-tree-menu-position-on-a-high-def-screen/51648/13 "2025-10-11T20:15:46Z")

</div>

You can copy the link by clicking on the “link” button in the cloud menu…

 ![CleanShot 2025-10-11 at 9 .14.36@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/8/4/847aaefb5b661263de3ac82d9b847188e74a062d.jpeg)

We also have a [guide in the user manual](https://docs.realmacsoftware.com/elements-docs/getting-started/elements-cloud) on how this all works.

---

<div class="post-metadata">

**Author:** ![jwDave](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jwdave/32/31841_2.png) [@jwDave](https://forums.realmacsoftware.com/u/jwDave)\
**Post date:** [October 13, 2025, 6:28pm UTC](https://forums.realmacsoftware.com/t/hamburger-tree-menu-position-on-a-high-def-screen/51648/14 "2025-10-13T18:28:18Z")

</div>

I am seriously starting to believe that stopping this behaviour is not possible. I really don’t want to sound negative as I think what is being achieved with Elements is amazing. But I have tried every setting possible that I can find and none prevents the menu bouncing to the side of whatever screen size you have. Maybe it is because I have the hamberger menu in a container/grid/container/flex to achieve what I am trying to achieve. But if this is too big an ask I would like to know and stop spending hours trying to fix it.

Please…. this is NOT in any way a critisism, bug report, or anything else I just would lke to either redisign what I am trying to achieve or fix it!

Thanks to all at RealMac, amazing team.

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [October 13, 2025, 6:48pm UTC](https://forums.realmacsoftware.com/t/hamburger-tree-menu-position-on-a-high-def-screen/51648/15 "2025-10-13T18:48:20Z")

</div>

Can you post the link here, or you could just post the area with this issue, copy project delete all except this bit

---

<div class="post-metadata">

**Author:** ![jwDave](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jwdave/32/31841_2.png) [@jwDave](https://forums.realmacsoftware.com/u/jwDave)\
**Post date:** [October 13, 2025, 6:59pm UTC](https://forums.realmacsoftware.com/t/hamburger-tree-menu-position-on-a-high-def-screen/51648/16 "2025-10-13T18:59:24Z")

</div>

Sure, the project link has been sent…

It is a site I am working on for some clients that is in a very early stage of moving to Elements from RW Classic.

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [October 13, 2025, 7:06pm UTC](https://forums.realmacsoftware.com/t/hamburger-tree-menu-position-on-a-high-def-screen/51648/17 "2025-10-13T19:06:26Z")

</div>

Sorry the project link

---

<div class="post-metadata">

**Author:** ![ben](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/ben/32/28488_2.png) [@ben](https://forums.realmacsoftware.com/u/ben)\
**Post date:** [October 14, 2025, 6:59am UTC](https://forums.realmacsoftware.com/t/hamburger-tree-menu-position-on-a-high-def-screen/51648/19 "2025-10-14T06:59:37Z")

</div>

HI @jwDave

I took a Quick Look at your project and I think there are a couple of ways you could solve this. You could either place the Modal content in the centre of the page, or you could use a Dropdown component instead. I’ve recorded a quick video with both of these options explained:

---

<div class="post-metadata">

**Author:** ![upssjw](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/upssjw/32/26063_2.png) [@upssjw](https://forums.realmacsoftware.com/u/upssjw)\
**Post date:** [October 14, 2025, 7:44am UTC](https://forums.realmacsoftware.com/t/hamburger-tree-menu-position-on-a-high-def-screen/51648/20 "2025-10-14T07:44:22Z")

</div>

Using modal and tree, its of no use the way it has to set up

---

<div class="post-metadata">

**Author:** ![jwDave](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/jwdave/32/31841_2.png) [@jwDave](https://forums.realmacsoftware.com/u/jwDave)\
**Post date:** [October 14, 2025, 8:02am UTC](https://forums.realmacsoftware.com/t/hamburger-tree-menu-position-on-a-high-def-screen/51648/21 "2025-10-14T08:02:03Z")

</div>

Thank you Steve, I will look this evening as I am away today.

[Next page](https://forums.realmacsoftware.com/t/hamburger-tree-menu-position-on-a-high-def-screen/51648.md?page=2)
