> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.quizell.com/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Styling & Configuring Your Mobile Menu ## Introduction Once your menu items are in place, you can fine-tune how the menu *looks and behaves* — its colors, layout style, sizing, scroll behavior, page visibility, and animations. This guide covers the **Style**, **Size**, and **Behavior** tabs of the menu editor. (Adding and arranging menu items is covered in *Building Your Mobile Menu*.) > The mobile menu is part of **Quizell Smart Search & Menu**, a separate Shopify app from Quizell. It displays on **mobile devices only**, not desktop. ## Where to find it * In your Shopify admin, open **Apps → Quizell Smart Search & Menu → Menus** * Click **Edit** on your menu to open the editor * Use the **Style**, **Size**, and **Behavior** tabs along the top A live **phone preview** sits on the right and updates as you make changes. ![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_lo0qni.png =1000x657) ## Style tab ### Color scheme * Choose **Scheme 1, 2,** or **3** for a quick preset. * **Add Scheme** to create your own. * **Import website colors** to pull your store's palette automatically — the fastest way to match your brand. * **Adjust colors** to fine-tune any scheme. ![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_1rnu697.png =1000x657) ### Menu style Pick the layout that fits your store from the available presets: * **Most Popular, Highlight, Floating, Rounded, Boxed,** and the **Spotlight** styles (Floating, Popup, Inner). These are the same layout presets offered when you first create a menu — you can change your choice here at any time. ![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_372s4w.png =1000x657) ### Submenu options — Depth Indicators * Choose the icon used to signal a submenu or nested level, so shoppers can tell which items expand. ![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_wl2w64.png =1000x657) ## Size tab The **Size Options** sliders control the dimensions of the menu's elements (in pixels): * **Icon/Image Size** — the size of each item's icon or image * **Text Size** — the label text * **Counter Size** — the badge that shows cart count * **Collapse icon Size** — the expand/collapse control on items with submenus Keep these legible on small screens — very small text or icons are hard to tap. ![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_1jw8zfq.png =1000x657) ## Behavior tab ### Display Options * **Show Menu Name** — display item labels alongside icons * **Hide when scrolling down on Mobile** — hide the bar as the shopper scrolls down, then reveal it again; set the scroll distance with Hide the menu when the user scrolls down X) pixels (e.g., 150) * **Show Parent Rounded** — round the parent item's appearance ![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_15k3ki4.png =1000x657) ### Manage menu visibility for pages Control where the menu appears: * **All pages** — show everywhere * **Exclude** — show everywhere except the pages you list * **Include** — show only on the pages you list ![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_mss48v.png =1000x657) ### Animations * **Menu Animation** — how the menu appears (e.g., Fade-in-Bottom) * **Cart Counter Animation** — how the cart badge reacts (e.g., Shake) ![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_1spbmob.png =1000x657) ## Custom CSS The editor also has a **Custom CSS** tab for menu-specific styling tweaks. For app-wide custom code and settings, see *App Settings, Custom Code & Languages*. ![](https://storage.crisp.chat/users/helpdesk/website/-/9/c/4/e/9c4e823823ced00/image_h9hycv.png =1000x657) ## Previewing your changes The **phone preview** reflects your styling in real time. Use it to check how the menu looks before publishing, and remember to verify on an actual mobile device, since the menu doesn't appear on desktop. Use **Reset** to revert your changes. ## Best practices * **Import website colors** for an instant, accurate brand match. * **Choose a menu style intentionally** — Spotlight styles draw attention to one key action; Floating and Boxed suit different layouts. * **Keep sizes tappable.** Don't shrink text or icons so far that they're hard to use on a phone. * **Use hide-on-scroll** to give shoppers more screen space while browsing. * **Use page visibility** to show the menu only where it helps — for example, excluding checkout. * **Preview on mobile** before considering it done. ## Important notes * The mobile menu is **mobile-only** and does not display on desktop. * The **Menu style** presets here are the same ones offered in the creation wizard — change them anytime. * **Manage menu visibility** controls exactly which pages show the menu. * For advanced or app-wide custom code, see *App Settings, Custom Code & Languages*. ## Troubleshooting **The menu's colors don't match my store** * Use **Import website colors**, pick a different **Scheme**, or fine-tune with **Adjust colors**. **The menu shows on pages where I don't want it** * Go to **Behavior → Manage menu visibility for pages** and use **Exclude** or **Include**. **The menu covers my content while scrolling** * Enable **Hide when scrolling down on Mobile** and tune the pixel threshold. **Text or icons are too small or too large** * Adjust the sliders on the **Size** tab. ## What's next? * [Building Your Mobile Menu](https://help.quizell.com/en/article/building-your-mobile-menu-1iiwity/) * [What Is Quizell Smart Search & Menu? (and how it's different from Quizell)](https://help.quizell.com/en/article/what-is-quizell-smart-search-menu-and-how-its-different-from-quizell-1f8zju/) * [Setting Up AI Search](https://help.quizell.com/en/article/setting-up-ai-search-16ze8ds/) * [Customizing Your Search Bar](https://help.quizell.com/en/article/customizing-your-search-bar-17pw913/) With your menu built and styled, it's ready to help mobile shoppers move around your store.