Full screen mobile menu

First, big thumb up for Daniele and Duncan. You did a great job with Sparkle 3! As for the full screen mobile menu, can anyone explain how this works?

2 Likes

Hi @Mart, thanks!

You create a popup from the top left popup thing in the format bar, selecting “New Popup”

image

This creates a default normal popup, changing settings to this is a start:

This makes the popup be in a fixed position, horizontally centered, use the browser vertical height and align to the top of the screen with 0 margin. In this configuration the popup/menu content will scroll vertically, making it ideal for menus of different heights. You can also use stick to top content inside the popup, to have a fixed header in case the content scrolls.

You can customize it’s name from the layer panel or from the arrange inspector, for example naming it “full screen menu”. Also make the popup background full width to use all the device screen, so something like this:

Now I’ll add some fictional content and make the background translucent, say:

Finally clicking the close button in the format bar (or selecting “No Popup” in the popup icon’ menu) you go back to canvas editing:

image

Here we need to add the trigger mechanism to open the popup, so I’ll add a button and set some hamburger-like icon to it:

I left the “menu” button label for accessibility purposes but made it transparent. The on click action opens the full screen menu. No mouse hover configured because this is for mobile, but you could also make it activate on hover if you used this on desktop.

The way to make this only work on mobile is to hide the hamburger button on the desktop devices (or where you don’t need it anyway).

With a little planning and measuring and trial and error you can get the popup close button to align over the hamburger, to make tap to open and tap to close more straightforward.

This is the result (in the safari responsive design mode):

4 Likes

@duncan Thank you for your world class support!

Excellent.

This tutorial would be worthy of adding to the “How to…” section of the written documentation, as well as a short video tutorial.

1 Like

Thank you so much Duncan for this! With this I was able to create a pop up full screen menu for my mobile versions.

I have only one Problem… The words in the big menu lead to separate pages of course… but how can I open the pop up on every page again, to look at other sections/pages of the website? If I open the pop up menu on the left on the other pages where I didn’t not create it, my pop up name is not there… Even tried adding a random pic and make it an “open pop up” button. But I can not choose my created pop up from any other page than the one I created it on top of… which seems strange.

They way I´m thinking is that the (option to open the) pop up needs to be on every separate page of my site structure for it to work as menu…
Is there a way to make the pop up show up on every page for the mobile devices? Otherwise I have no way to jump all the menu pages if I can’t access my pop up menu. :woman_shrugging: am I missing something?

If you make the original button visible on all pages, it will work.

@duncan: are you referring to the x button that appears when creating a new pop up? it doesn´t give me that option to “show on all pages”… it´s greyed out.

with the hamburger icon- the one that opens the pop up, I CAN show it on all pages, BUT the pop up I created on the first page can not be accessed from the other pages. it doesnt give me “pop up 5” or “pop up 6” (which are the same, I just tried to find if I do the pop up thing again, if it then works) … made a few screenshots… sorry they are in german :frowning:



Hi,

you cannot make a copy of your original button visible on your other pages, it hs to be your original “master” button.
For myself to not get confused, I only use my start page as a “master” and only make elements from that start page visible to other pages.
You maybe have a mixup somewhere in our pages.
What I have do ne in the past and worked for me:

  1. deselected the option “make visible on other pages”
  2. went through all other pages and deleted the elements they should not be visible, because I have deselect that option.
  3. went back to the master page and selected “make visible on all pages” again.
  4. checked all pages that my selected element is available on all pages.

Hope that helps.

Michael

1 Like

Sorry I’m not sure what you mean, can you elaborate? Maybe I’m misunderstanding the setup, but any button you make visible on all pages can have a popup associated with it, and should bring the popup with it to all pages.

Sure I can Duncan and yes you are right.
Every button you make vitiable on all pages can have a popup associated.
Apologies about my English, I am still think too much in German and that reflects on my writing skills.
What I wanted to say is, when you have started creating a button on e.g. page 5 and come back days later and create a new button on page 1 (what I call master page) and make this button visible to other pages then you still have on page 5 that button you have started and probably forgotten about it. This button on page 5 might cause problems in such functionality.
Or make the button on page 5 visible for other pages, does ist guarantee that changes are getting copied through all pages when you makes changes on the button on page 1?
I had my problems in the past and as soon I force myself to make header and footer changes on my master pages, it seems I have eliminated errors.

that’s just my experience and thought it might help.

1 Like

Hey @duncan ! I now managed to get the mobile mega menu working for mobile devices, when I go to preview the mobile version, all is workling fine. :+1: :+1: I have created a little animation with the logo of the company I´m doing the website for… when I click on that the mega menu now opens and is fully functional thanks to your and MiWe´s help. When I go in preview on Pc/etc though… absolutely nothing happens when I click on the logo. It seems it somehow cancelled out the normal menu and the normal way it should work (and did work) before. I carefully checked the settings… the popup is only visible on the mobile versions, it says on click open pop up, as it should be. on the pc version the setting is “on click go to site of this website”… but it doesnt work. when I click on the logo now- absolutely nothing happens. frustrating… i can´t seem to find the error.
Maybe you have an idea, @duncan ? Highly appreciate your kind help in this community forum!! Greetings from Austria :slight_smile:

It’s hard to say without looking at the project, please send it over via wetransfer.com to feedback@sparkleapp.com

@duncan thank you for offering! I just sent it your way!