# Menu Questions/Bugs/Feature Request

**URL:** <https://forums.realmacsoftware.com/t/menu-questions-bugs-feature-request/47322>\
**Category:** Elements\
**Created:** [April 27, 2025, 2:00pm UTC](https://forums.realmacsoftware.com/t/menu-questions-bugs-feature-request/47322 "2025-04-27T14:00:13Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![dripple](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dripple/32/20481_2.png) [@dripple](https://forums.realmacsoftware.com/u/dripple)\
**Post date:** [April 27, 2025, 2:00pm UTC](https://forums.realmacsoftware.com/t/menu-questions-bugs-feature-request/47322/1 "2025-04-27T14:00:13Z")

</div>

So I decided to give [Elements](https://elementsapp.io/) a spin and played around a bit. Watching the Videos on YouTube and cross reading the manual makes onboarding a bit tricky, but we get there 🙂

Overall I am impressed what Dan and the team have archieved, heck: the UI configuration is a freaking dream! I wish my other beloved dev tools could do these tricks so nicely!

Sadly, I hit a roadblock with the **Menu component** right away, and I just drop the questions/feedback here and already apologise if I missed something:

- Font colour set to a specific breakpoint doesn’t work. The last colour config overwrites all others.
- Where can I style the close button of the mobile menu?
- The animations of the mobile menu only apply on closing the menu, not on opening.
- Mobile Menu and Sub Menu share the same colour config and Animation config and can’t set a specific breakpoint. E.g. on Mobile I want a dark full-screen off-canvas menu effect sliding from right to left, on Desktop a light submenu that simply fades in or slides down.
- Can I swap the Brand Logo and Mobile Menu Trigger, e.g., to have a burger on the left? (More common for mobile)
- I am also not so sure how the node tree reflects the mobile menu itself, e.g. the dropzone is not reflected in the node tree?  
 ![CleanShot 2025-04-27 at 16.19.37](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/0/3/03256df28069d8a9bf1a4a210adc7c5d2189c8d1.jpeg)

(The Dev Diary Ep9 refers to a specific Mobile menu, with more settings, e.g. animation speed and such, and looks actually a bit more powerful than the current Menu component.)

Cheers,  
Heiko

---

<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:** [April 28, 2025, 9:16am UTC](https://forums.realmacsoftware.com/t/menu-questions-bugs-feature-request/47322/2 "2025-04-28T09:16:54Z")

</div>

> [@dripple](#):
>
> Font colour set to a specific breakpoint doesn’t work. The last colour config overwrites all others.

Sounds like a bug, I’ll investigate that one ASAP!

> [@dripple](#):
>
> Where can I style the close button of the mobile menu?

There aren’t any controls for styling the close button yet!

I’ll try to add that one this week 🙂

> [@dripple](#):
>
> The animations of the mobile menu only apply on closing the menu, not on opening.

That also sounds like a bug — I’ll check it out ASAP.

> [@dripple](#):
>
> Mobile Menu and Sub Menu share the same colour config and Animation config and can’t set a specific breakpoint. E.g. on Mobile I want a dark full-screen off-canvas menu effect sliding from right to left, on Desktop a light submenu that simply fades in or slides down.

Right now, that’s expected behavior.

We made the decision, mainly for simplicity and user experience reasons, that the Mobile Menu and Desktop Submenus would share some styling.

It sounds like you’re looking to have two completely different menu designs for mobile and desktop. That’s a bit tricky to achieve cleanly within a single Menu component.

However, I think you could definitely build this using some built-in components like Top Page, Dropdown, and Modal to create different menus for different screen sizes.

It would involve a bit more manual setup (building, styling, showing/hiding based on screen size), but I think what you’re describing is definitely doable in [Elements](https://elementsapp.io/).

The only current limitation is multi-level submenus inside Dropdowns — right now, only the Menu component supports sub-pages.

But good news: we planning on adding more menu components with better submenu support in the near future!

If you can share an example of exactly what you’re aiming for, we’d be happy to whip up a sample project to show you the best approach 🙂

> [@dripple](#):
>
> Can I swap the Brand Logo and Mobile Menu Trigger, e.g., to have a burger on the left? (More common for mobile)

Not at the moment, but we could easily add this option — I’ll add it to my list of things to fix 🙂

> [@dripple](#):
>
> I am also not so sure how the node tree reflects the mobile menu itself, e.g. the dropzone is not reflected in the node tree?

This looks like it could be a bug as the component structure should be reflected in the tree view, even when inside of a dropzone. Any chance you could share the project with us using [Elements cloud](https://docs.realmacsoftware.com/elements-docs/elements-cloud/account-sign-up)? That way we can take a look and see if we can fix it 🙂

---

<div class="post-metadata">

**Author:** ![dripple](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dripple/32/20481_2.png) [@dripple](https://forums.realmacsoftware.com/u/dripple)\
**Post date:** [April 28, 2025, 9:44am UTC](https://forums.realmacsoftware.com/t/menu-questions-bugs-feature-request/47322/3 "2025-04-28T09:44:05Z")

</div>

@ben No rush 😃 I just wanted to mention it and wasn’t sure if I miss something, as the older videos refer to a separate Mobile Menu component.

> [@ben](#):
>
> It sounds like you’re looking to have two completely different menu designs for mobile and desktop. That’s a bit tricky to achieve cleanly within a single Menu component.

Yes. 100%.  
A desktop is a Desktop, and a Mobile is a Mobile. The days of having to compromise are over 🙂 From my experience in my day job, dark off-canvas menus work best on mobile.  
(_I might be spoiled by the Slide Navigation stack from the Foundry 2 package 😃 )_

I already thought about using the modal as an off-canvas.

Question: Are the layout properties “Hidden” or “Visibility” the correct ones to hide/show components based on the breakpoint?

(I’ll send you the cloud link via PM)

---

<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:** [April 28, 2025, 10:20am UTC](https://forums.realmacsoftware.com/t/menu-questions-bugs-feature-request/47322/4 "2025-04-28T10:20:35Z")

</div>

> [@dripple](#):
>
> Are the layout properties “Hidden” or “Visibility” the correct ones to hide/show components based on the breakpoint?

Yes!

**Hidden** will completely remove the component from the DOM layout—so it’s as if it doesn’t exist at all, and it won’t take up any space.

**Visibility: Hidden** , on the other hand, will hide the component visually in the browser, but it will **still occupy space** in the layout.

In most cases, you’ll want to use **Hidden** 🙂

---

<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:** [April 28, 2025, 10:48am UTC](https://forums.realmacsoftware.com/t/menu-questions-bugs-feature-request/47322/5 "2025-04-28T10:48:07Z")

</div>

> [@dripple](#):
>
> Font colour set to a specific breakpoint doesn’t work. The last colour config overwrites all others.

I just re-read this one and realised I misread it 🫣

[Elements](https://elementsapp.io/) doesn’t support responsive colours, so you cannot override colours between devices.

---

<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:** [April 28, 2025, 10:51am UTC](https://forums.realmacsoftware.com/t/menu-questions-bugs-feature-request/47322/6 "2025-04-28T10:51:42Z")

</div>

> [@dripple](#):
>
> - Where can I style the close button of the mobile menu?
> - Can I swap the Brand Logo and Mobile Menu Trigger, e.g., to have a burger on the left? (More common for mobile)

These two are now fixed and will be in the next beta 😃

> [@dripple](#):
>
> The animations of the mobile menu only apply on closing the menu, not on opening.

I can’t replicate this one, even in the project you sent me. Could you give it another test, and if it’s still an issue can you let me know which browser you’re using? 🙂

---

<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:** [April 28, 2025, 10:54am UTC](https://forums.realmacsoftware.com/t/menu-questions-bugs-feature-request/47322/7 "2025-04-28T10:54:41Z")

</div>

> [@dripple](#):
>
> I am also not so sure how the node tree reflects the mobile menu itself, e.g. the dropzone is not reflected in the node tree?

I can’t replicate the issue here, does a restart of [Elements](https://elementsapp.io/) fix it for you?

 ![CleanShot 2025-04-28 at 12.52.02@2x](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/2/d/2dc333ac4984959107d4c5b17bc68ac3e7b710c7.jpeg)

---

<div class="post-metadata">

**Author:** ![dripple](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dripple/32/20481_2.png) [@dripple](https://forums.realmacsoftware.com/u/dripple)\
**Post date:** [April 28, 2025, 2:32pm UTC](https://forums.realmacsoftware.com/t/menu-questions-bugs-feature-request/47322/8 "2025-04-28T14:32:31Z")

</div>

> [@ben](#):
>
> In most cases, you’ll want to use **Hidden** 🙂

That’s what I want. Thank you.

> [@ben](#):
>
> [Elements](https://elementsapp.io/) doesn’t support responsive colours, so you cannot override colours between devices.

Okay, but what’s the breakpoint button then for? 🤔

 ![CleanShot 2025-04-28 at 16.15.37](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/d/adcc736aa93dff55c0a8557e9cee7355a82aae52.jpeg)

> [@ben](#):
>
> These two are now fixed and will be in the next beta 😃

Yieeehaaaa!

> [@ben](#):
>
> I can’t replicate the issue here, does a restart of [Elements](https://elementsapp.io/) fix it for you?

Indeed, it did… I was sure I have restarted [Elements](https://elementsapp.io/) a few times yesterday (it becomes in-responsive from time to time when sent to background and no longer reacts to user interaction, so I have to restart the application)

 ![CleanShot 2025-04-28 at 16.18.35](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/d/5/d55f8d77bd76771815843706f637a762bf2923b0.jpeg)

> [@ben](#):
>
> I can’t replicate this one, even in the project you sent me. Could you give it another test, and if it’s still an issue can you let me know which browser you’re using? 🙂

It’s a weird one. I typically use chrome, where the “bug” happens very often, but not always. However, on Safari Desktop and the phone, the transition always happen as expected and it’s also smoother (the GIF are only 10FPS, but you get it)

Chrome:  
 ![CleanShot 2025-04-28 at 16.23.20](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/5/a56f7ca77860a441802118e4d474ac82b2a046c9.gif)

Safari:  
 ![CleanShot 2025-04-28 at 16.24.47](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/a/9/a98e5ac61344285ec7182268b503f2cfdf84082b.gif)

---

<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:** [April 29, 2025, 7:26am UTC](https://forums.realmacsoftware.com/t/menu-questions-bugs-feature-request/47322/9 "2025-04-29T07:26:30Z")

</div>

> [@dripple](#):
>
> Okay, but what’s the breakpoint button then for? 🤔

If you mean the link icon, then that is for overriding controls on the Global.

This allows you to create a global, but have fine-grained control over the styling by overriding settings on each instance.

Check out the [documentation on Globals](https://docs.realmacsoftware.com/elements-docs/elements-app/templates/global-templates), which includes a video showing how this works 🙂

---

<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:** [April 29, 2025, 7:29am UTC](https://forums.realmacsoftware.com/t/menu-questions-bugs-feature-request/47322/10 "2025-04-29T07:29:29Z")

</div>

> [@dripple](#):
>
> It’s a weird one. I typically use chrome, where the “bug” happens very often, but not always. However, on Safari Desktop and the phone, the transition always happen as expected and it’s also smoother (the GIF are only 10FPS, but you get it)

Using your project, I tried to replicate this in Chrome without any luck 🤔

What macOS are you running, and what’s the spec of your computer?

---

<div class="post-metadata">

**Author:** ![dripple](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dripple/32/20481_2.png) [@dripple](https://forums.realmacsoftware.com/u/dripple)\
**Post date:** [April 29, 2025, 8:24am UTC](https://forums.realmacsoftware.com/t/menu-questions-bugs-feature-request/47322/11 "2025-04-29T08:24:52Z")

</div>

> [@ben](#):
>
> If you mean the link icon, then that is for overriding controls on the Global.

Nope, not the link icon. I specifically mean the breakpoint button (what the official name for it?):

 ![CleanShot 2025-04-29 at 10.23.52](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/4/5/458676f3efef13e398c98f5d9a9e9f66498eccdf.jpeg)  
My understanding was, that I can change the default and active state per breakpoint.

> [@ben](#):
>
> Using your project, I tried to replicate this in Chrome without any luck 🤔

I think I found the problem: the Grammly extension in Chrome injects itself in every window. When disabled (I tried all my extension) it seems to work.

> [@ben](#):
>
> What macOS are you running, and what’s the spec of your computer?

(Macintosh PowerBook 16 / M3 Max / 48 GB with a 49" UW screen, the latter causes trouble from time to time with different Electron and NW.js based applications)

---

<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:** [April 29, 2025, 9:12am UTC](https://forums.realmacsoftware.com/t/menu-questions-bugs-feature-request/47322/12 "2025-04-29T09:12:00Z")

</div>

> [@dripple](#):
>
> ![CleanShot 2025-04-29 at 10.23.52](https://europe1.discourse-cdn.com/flex005/uploads/realmacsoftware1/original/3X/4/5/458676f3efef13e398c98f5d9a9e9f66498eccdf.jpeg)
> 
> My understanding was, that I can change the default and active state per breakpoint.

Ahhh I see. My apologies. That is actually a bug, the `state` shouldn’t be responsive, that’s only there to show/hide the colours for each state.

---

<div class="post-metadata">

**Author:** ![dripple](https://dub1.discourse-cdn.com/flex005/user_avatar/forums.realmacsoftware.com/dripple/32/20481_2.png) [@dripple](https://forums.realmacsoftware.com/u/dripple)\
**Post date:** [April 29, 2025, 9:40am UTC](https://forums.realmacsoftware.com/t/menu-questions-bugs-feature-request/47322/13 "2025-04-29T09:40:05Z")

</div>

> [@ben](#):
>
> That is actually a bug, the `state` shouldn’t be responsive, that’s only there to show/hide the colours for each state.

If you wanna fix it by implementing that feature, it would be awesome 😉
