Menu Responsive Website

Question
1

I created a website with loose menu elements so I can control the size of spaces between each menu name on the menu bar. Similar to the video https://www.youtube.com/watch?v=Bj3fpBHLJeQ&t=1776s

Now I want to make it responsive for a portrait smartphone and the best would be I will use the “three lines” menu option.

I am not able to figure out how I can do that. I can do this when the menu is combined as items like in the video https://www.youtube.com/watch?v=5BidBTEju18&t=1225s but not when they are single elements.

Is there a way to do this?

THX !

2

If I’m understanding correctly the best way is to hide the separate menus on mobile and create a new mobile menu, which would then be hidden on desktop.

3

Hi Duncan, nice to meet you!
Your videos are helping me a lot so keep adding them !!

You understand correctly…

How do I hide the separate menu items?
Should I make a box, place it over the menu part in the same color as the background so you are not able to see them? Or is there another way?

If I understand correctly it does mean I also need to make a second “three line” menu, make it hidden on the desktop part and visible on the mobile part, right?

4

Sorry, when using multiple devices you hide something on one device by going to the arrange inspector and unchecking “show on this device”.

So you would do that for the three menus while on mobile, and also di it for the mobile menu on the desktop device.

Finally the eye icon in the format bar (“hidden elements”) makes them visibile in the canvas even if they’re hidden on the current device.

1 Like