Style Settings for Mobile Menu app

Style Settings for Mobile Menu app


Head to Display settings tab, you'll find options to style your mobile menu in Custom Style:

Custom Style



Menu box text alignment
Align all content on menu, including section title, links list, social icons...
For title in each product or image, there's alignment option inside each.

Menu horizontal spacing
Adjust the space on the left and right of the menu content.

Font family
Our app supports Google Fonts. Type a font name in "Font family" to search for a font that fits your theme.
Leave the font family blank if you want to use theme's default font.

Color
Adjust the colors of text to fit your store. These adjustments apply globally to all sections.
Note: there's no hover event on mobile, so there's no hover color.
Leave all color options blank if you want to use your theme's default colors.

Background color
If you use the "Replace theme menu" method, the background color bases on your theme's default mobile menu. You'll need to modify code to change it (contact us for help).
If you use the "Add an extra mobile menu", you'll have an option to change background color.


Hamburger Button Style

*Only available if using "Add an extra mobile menu with floating button".



Position
Set the position of hamburger button. Please remind if your store is having any other buttons showing up in the selected position.

Style
Our app allows 3 shapes of the hamburger button: squared, rounded and circled.

Size
Adjust the size of the button.

Show shadow
Recommend to enable this option, it makes the button easier to be seen.


*Only available if using "Add an extra mobile menu with floating button".



Position
Set the position where the menu box slide in: Left (slide from Left to right) or Right (slide from Right to left).

Animation
Set the animation when opening submenu.
Remember to turn on the "Enable animation" in the Menu section settings.

Skin
Skin is pre-defined colors for your menu. To apply Skin, you need to clear color hex in all color options below it.

Width
Adjust the wideness of the menu box.
Note: if you set it too wide (eg. > 320px), menu might be cut off on smaller screens (eg. iphone 5).

Padding
Adjust the space from the menu content to the edge of menu box.

Background
Set the background color of your menu box. Then you can change the text color in Custom Style below.



    • Related Articles

    • Style & Advanced settings

      1. Style Step 2: Add & Design > Style All settings in this section apply globally to all menu items. Animation *Available in Premium plan only. There are 4 animations to appear submenu: fade in, shift up, flip in, zoom in. Note: select "none" if ...

    • How to show Smart Menu on your store

      After creating your menu in Smart Menu, you can choose a current menu on your store to be replaced with Smart Menu. There are 2 ways to do it: Auto - Replace Main menu, Manual - Replace menu from Shopify or Manual - Replace menu by CSS selector. ...

    • Add Mobile Menu app to your store

      After creating your menu in Mobile Menu app (not Smart Menu), you can go to Display settings tab to: Replace theme menu: select a current menu on your store to be replaced with Mobile Menu OR Add an extra menu separately with floating button, not ...

    • Frequently Asked Questions for Smart Menu

      What is the difference among Free, Basic and Premium plans ? Please see the comparison table of three plans here. Can I downgrade to Free/Basic plan after upgrading? Yes you can. To cancel paid plans, please go to "Profile" page > click on "Cancel ...

    • Why is my Smart Menu not showing up or showing incorrectly?

      There are various reasons why Smart Menu is not showing up or showing incorrectly on a store. Please read these cases and check the following solutions. Loading time Our server is placed in the US, therefore, there might be a delay in loading time ...