Pin custom button on mobile / Customize quick action buttons

Ask the community
, ,
1

Hello , I’ve been trying to find a solution but it simply doesn’t work.
My problem is this; I have a long Restaurant Menu , I defined Anchor Points and I wanted to create a button that sends the user to next / previous Anchor.
However , I have a code that works for Desktop version but on Mobile the buttons don’t stay pinned.
I’ve thought "Oh great there’s a “custom action button” but it isn’t so custom as I can’t write a code for it. Unfortunately the Quick Action Bar only allows coding the Bar, not the buttons that are contained in it.

Does anyone have any idea how to solve this or maybe knows the ID of those pre-defined buttons so I can write a code for them?

366×858 28.1 KB

2

Pinning anything on screen will not work on mobile devices.
https://support.wix.com/en/article/pinning-an-element
Pinned elements are not pinned on your mobile site.

As for the Quick Action bar, you are right and you can only do certain things with the available code options for it.
https://www.wix.com/corvid/reference/$w.QuickActionBar.html

The only thing that you can do with the buttons in it is to use the onItemClicked event and get whatever is supposed to do when it is clicked.
https://www.wix.com/corvid/reference/$w.QuickActionBar.html#onItemClicked

You have a few choices here and it also depends on if you are wanting to keep the menu as a long list or to split it up into the different sections.

You can use selection tags so that the user can simply choose something in the selection tags element and it will display just those etc…
https://www.wix.com/corvid/example/filter-with-multiple-options

You can look at creating submenu pages for each of your food sections that are currently anchored.
https://support.wix.com/en/article/creating-a-subpage-drop-down-menu
This way in your mobile menu you can simply have the different sections in your menu and the user can simply click them to go to that page.
https://support.wix.com/en/article/customizing-your-mobile-menu-4726130
https://www.wix.com/corvid/forum/tips-tutorials-examples/introducing-the-new-mobile-menu
https://www.wix.com/corvid/reference/$w.MenuContainer.html

You can again keep the subMenus so that you have the seperate pages in your mobile menu and instead of using seperate pages, just simply link the different sections to the anchors on your page already.
https://support.wix.com/en/article/linking-an-element-to-an-anchor
https://www.wix.com/corvid/reference/$w.Anchor.html
https://www.wix.com/corvid/reference/$w.Anchor.html#scrollTo

You can just have the different choices in a list on the mobile device and when the user presses on that choice, you have a lightbox or a container shown over the page that is displaying those food choices. The user can then close that lightbox or container to then go to another choice.

You keep the same as the desktop with the long menu list and just move the anchors on the mobile editor so that they correspond with the correct sections and then add the different sections to the mobile menu and link them to the appropriate anchors on that page.

Also note that you can make use of Wix Window API and the formFactor function to write code specifically for a certain device, so what you do on desktop doesn’t always have to be the same as on a mobile for example.
https://www.wix.com/corvid/reference/wix-window.html#formFactor
https://support.wix.com/en/article/corvid-writing-code-that-only-runs-on-mobile-devices
https://support.wix.com/en/article/corvid-tutorial-displaying-elements-in-mobile-only

3

Thank you very much ! You are a lifesaver !

4

@11markov11 can you elaborate how you solved it ?

5

@ambitionsug if you’re using Editor X, you can do it by setting the element position to: fixed.
if you‘re using the regular editor and you have a premium account, you can create a custom element of your own, snd set its position to “fixed” using code.