The new mobile menu allows you to take elements from your site’s header and footer and place them inside a menu box. This way you can create a mobile menu that is rich with content and design while saving valuable space in your mobile header and footer.
You can hear more about the new mobile menu (and other new mobile features) in this round table discussion .
To update your mobile menu to the new menu:
Open the Editor > go to the Mobile Editor > select the menu > click settings > click Update Now > Click Get it Now
To move elements from the header / footer to the menu box:
Select element from the header/footer > right click > move to > move to menu box
The new mobile menu also has two new API functions:
4 Likes
This is much improved, thanks @Sam!
Hi Sam,
I’m loving the new mobile menu, however when I go to change the element and setup my own image to open the menu container, it won’t let me use the code for open and close.
I’ve viewed the sample here:
https://idancohen4.wixsite.com/menu-code?showmobileview=true
I’ve used the code from the Code API here:
https://www.wix.com/code/reference/$w.MenuContainer.html
However, when I use the code below it says that the .open() is not able to be used. I have changed the #myMenuContainer to my own element name and have even tried changing it back to suit the supplied code.
I’ve got it all setup so that the new image element to replace the existing menu toggle is only shown on mobiles, with the new image aligned up to where the existing menu toggle was in my header.
Nothing works, all I can do is to make the existing menu toggles transparent and put my new image element underneath the existing toggles so that the transparent toggles are selected with the new image elements underneath.
$w("#myMenuContainer").open()
I think I’ve been able to reproduce the issue you guys are having. Looks to be a bug on our side that is actually not related to the mobile menu. Good news is that I have a couple of workarounds.
-
Seems to work if you add the button directly to the header. Don’t place it in the body of the page and then move it to the header.
-
Use a dynamic event handler instead of the properties panel, which creates a static event handler. So, something like this:
$w.onReady(function () {
$w('#myOpenButton').onClick( () => {
$w('#menuContainer1').open();
} );
});
Let me know if this helps.
@sam-wix
Thanks for that Sam.
I have now gone back and reset it all up again in the Wix Editor with everything through the header only as you stated above and both the open and close menu buttons are working for myself as a workaround for now.
I have also got all my code for it working fine after adding the onClick function into the code instead of through the properties panel as you also suggested too. I’ve added it in after the OnReady and Wix Window Mobile part and it all works perfectly.
However even though it all works now, I am still getting the red error circle with the .open and .close commands in my code in the site tab.
If it is a bug on Wix side, then hopefully it can be remedied quickly and the errors sorted in the code too, otherwise other Wix Users who want to use their own images for the mobile menu will end up complaining about the same thing.
@givemeawhisky Yes, this is an autocomplete bug on our side. The code will work fine even though the code panel thinks there is an error. I will pass on this bug.
Hi,
Would like to know how is it possible that it is over a year now and still the
$w . onReady ( function () {
$w ( ‘#myOpenButton’ ). onClick ( () => {
$w ( ‘#menuContainer1’ ). open ();
} );
});
Doesn’t work, the open command gives an error and doesn’t let the mobile menu to open when clicking on the custom image I have chosen, please let me know if there is a way to fix the issue as the smallest size of the Wix mobile menu is too big and i Need a smaller lines for the mobile menu.
Thanks
Ofir did you write the code under ‘page’ section or ‘site’ section?
the hamburger menu is part of the ‘site’ and not the page.
the API is working since we released it and never stopped working.
Can you please detail you case better including link to your site so I can help you?
Idan,
thanks for your message, I wrote it under the Site section, the open remain aleays as an error for me.
a link will not help you as i didnt publish nothing yet, as the website is published already and i cannot leave it as clients will see it.
please let me know if i can contact you private, thanks!
Your code won’t work as you have added the code with no indication of where you want it to work, you need to be using the Wix Window API and the formFactor function to make sure that it works on mobile only.
As it states in the API documentation…
You can add and remove elements to the container to customize your site’s mobile menu. The menu only appears in the mobile version of your site.
It all works fine for me as Sam had stated above in previous replies, it was shown as an error then however it works.
I have just made up a simple menu on a test site and it still works fine.
To have your own image instead of the mobile menu hamburger menu - which you can change in the design settings and change it to another style etc.
Simply add two images to your editor header in the desktop mode and set them to be hidden on load.
If you want the same image, then just use two of the same like I have done here, otherwise add whatever images you are using to the header.
Then on the mobile editor simply right click on the image that you want to be in the menu when it is open and choose move to menu box.
This will move that image to inside the mobile menu container and will only show it when it is open.
Simply hide the original mobile menu and put your own image in place of it or where you want the menu button to be and make sure that you put it in the same place for the open and closed states.
Then simply write code for it to work and I have copied the code I have used below.
This is fully working and as this is an old post it is being closed.
Please add a new post with a link to refer back to this one if you need more help with it.
