Navigation Menu Option

Hello,

I am using RapidWeaver Elements.

What I need:

  • On desktop: a full navigation menu with dropdown sub-menus.

  • On iPhone: a simple menu with no dropdowns.

This was possible in RapidWeaver Classic, but I cannot find how to do this in Elements.

My questions:

  1. Can Elements use different navigation behavior for desktop vs mobile?

  2. If yes, how is this done?

  3. If not, is there a recommended workaround?

Thank you,

Lyle

no styling, showed two different versions mobile no dropdown and dropdown on desktop

I have reviewed the video. However I do not see what controls are changed or what it is set for. I am looking for the full page with drop downs, and only top pages shown for the iphone. Thank you for your help.

The reason is that when clients use their phone instead of their desktop the selection of order forms are too long. The menu does not allow the menu to be scrolled to the last few items on the Iphone.

I just used the hidden feature, in this case on full screen menu and the container for the top page menu, could have placed top pages straight on screen and use hidden option rather than using container

set the screen size to change with the blue dot on hidden or not hidden, as required

project as shown

elementsapp://downloadDocument/nJIY0U5fLC3V

top pages not in a container

elementsapp://downloadDocument/Z7CKv2VhpbYF

You’ll want to use the Menu component on desktop, and hide that on Mobile.

There is a “Layout > Display > Hidden (toggle).” property in the Menu controls that will allow you to hide it on mobile (hidden toggle on), and then show it on desktop (hidden toggle off).

Have a look at the Responsive Design docs for more information around how you can set/override properties across devices.

On mobile you could use a combination of the Modal and Top Pages components to create a simpler menu.

Have a look at the linked docs pages above as they contain videos explaining how they work, and if you get stuck just let us know :slight_smile:

That’s what the two projects I provided do

Duh, the lights went on. I finally understand. It works. Thanks everyone.