Menu Questions/Bugs/Feature Request

[dripple (Heiko / paperclip studios)]

So I decided to give Elements 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?
  
  

(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

[ben]

@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.

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? That way we can take a look and see if we can fix it

[dripple (Heiko / paperclip studios)]

@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)

[ben]

@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

[ben]

@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 doesn’t support responsive colours, so you cannot override colours between devices.

[ben]

@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?

[ben]

@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 fix it for you?

[dripple (Heiko / paperclip studios)]

@ben

In most cases, you’ll want to use Hidden

That’s what I want. Thank you.

@ben

Elements doesn’t support responsive colours, so you cannot override colours between devices.

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

@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 fix it for you?

Indeed, it did… I was sure I have restarted Elements 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)

@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:

Safari:

[ben]

@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, which includes a video showing how this works

[ben]

@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?

[dripple (Heiko / paperclip studios)]

@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?):

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)

[ben]

@dripple

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.

[dripple (Heiko / paperclip studios)]

@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