How can I customize the action quickbar in the mobile version?
Why isn’t it possible to customize it and adapt the colors to match my website’s branding?
I would like to adjust things such as the background opacity, button/icon sizes, and colors so that the quickbar is consistent with my website’s corporate design.
Two of the three things you want are adjustable, one is not, and the controls are
not where most people look.
They live under Design, not Settings. Select the Quick Action Bar, click the
Design icon, then Customize Design. Settings only controls which actions the bar
performs, which is why it looks like there is nothing to style.
Background opacity: available on the vertical layout. In Customize Design the
closed view has a background colour with an opacity slider, plus a separate icon
colour. On the horizontal layout you get a colour scheme with an invert toggle,
and opacity on the border rather than the fill.
Colours: available on both layouts. Horizontal works from a colour scheme with an
invert option. Vertical gives you background colour and icon colour directly on
the closed view, and a colour scheme on the open view. Border colour, opacity and
width, and shadow angle and size, are adjustable on both.
Icon and button size: not exposed. There is no documented size control for the
bar’s icons or buttons. If they are the wrong scale for your design, that is a
limit of the element rather than a setting you have missed.
Before you go hunting, check which element you actually have. The older Mobile
Action Bar and the newer Quick Action Bar are two different elements, and the
Customize Design controls above belong to the Quick Action Bar. If your panel
looks nothing like the above you are probably still on the old one. To move over:
Mobile Tools in the mobile Editor, click Mobile Action Bar, switch off “Show on
your mobile site,” save, refresh with F5, then add the Quick Action Bar from
Mobile Tools.
One thing worth stating: this element exists in the Wix Editor mobile Editor
only. Wix Studio has no Quick Action Bar - it is an open feature request there.
So if you are building in Studio, the route is to build the bar yourself as a
pinned element.
