{"title":"Mobile Menu \u0026 Hamburger","description":"\u003cp\u003eMobile Menu \u0026amp; Hamburger work for Shopify and Shopify Plus stores, handled as a flat-rate task by an in-house team that has worked on this since 2016.\u003c\/p\u003e\u003cp\u003eWe have completed 212 mobile menu \u0026amp; hamburger requests for merchants, including work on Turbo, Parallax, Impulse and Prestige. Below are 5 real examples with the request, the approach and what shipped.\u003c\/p\u003e","products":[{"product_id":"add-search-and-cart-and-account-icons-to-mobile-header-turbo","title":"Add Search and Cart and Account Icons to Mobile Header","description":"\u003cp class=\"task-lead\"\u003eA retailer wanted the mobile menu to slide in from the side and the mobile header to include search, cart, and account icons.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eMake the mobile menu slide in and out from the side. And add search, cart, and account icons to the mobile header so they're always reachable.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eA mobile header with only a hamburger. Everything else was buried.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe rebuilt the mobile menu as a slide-in panel and added search, cart, and account icons to the mobile header. The cart icon shows the item count.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eSlide-in mobile menu\u003c\/li\u003e\n\u003cli\u003eSearch, cart, and account icons in the mobile header\u003c\/li\u003e\n\u003cli\u003eCart item count on the icon\u003c\/li\u003e\n\u003cli\u003eDesktop header unchanged\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155681701962,"sku":"TASK-0178","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"move-hamburger-position-parallax","title":"Move Hamburger Position","description":"\u003cp class=\"task-lead\"\u003eA brand wanted their mobile navigation adjusted: logo on the left, hamburger on the right, and the menu bar colors inverted.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eUpdate the mobile navigation so it has our logo on the left and the menu icon on the right. And change the menu bar from black background with white text to white with black text.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eSmall changes with a big effect on how the mobile header felt.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe repositioned the logo and hamburger, inverted the menu bar colors, and checked the header at every mobile breakpoint so nothing overlapped.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eLogo left, hamburger right on mobile\u003c\/li\u003e\n\u003cli\u003eMenu bar colors inverted\u003c\/li\u003e\n\u003cli\u003eChecked at every mobile breakpoint\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155682553930,"sku":"TASK-0192","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"replace-hamburger-with-bar-and-tabs-impulse","title":"Replace Hamburger with Bar and Tabs","description":"\u003cp class=\"task-lead\"\u003eA dog bar with a retail store wanted their mobile menu replaced with a bottom tab bar for the four things customers did most.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eWe want to switch themes and rethink mobile navigation. Instead of a hamburger, a bottom bar with Shop, Events, Book, and Cart. Those are the four things people come for.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eA hamburger hid the four actions that mattered.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe built a bottom tab bar for mobile with the four actions, always visible, and kept a compact menu icon for everything else.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eBottom tab bar on mobile\u003c\/li\u003e\n\u003cli\u003eFour primary actions always visible\u003c\/li\u003e\n\u003cli\u003eSecondary menu for everything else\u003c\/li\u003e\n\u003cli\u003eDesktop navigation unchanged\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155686027338,"sku":"TASK-0205","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"multi-level-and-accordion-mobile-menu-prestige","title":"Multi-level and Accordion Mobile Menu","description":"\u003cp class=\"task-lead\"\u003eA retailer's mobile submenu colors were rendering wrong, making nested items unreadable.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eThe mobile menu isn't showing properly with the colors. When you open a submenu on mobile, the items are the same color as the background.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eInvisible submenu items on mobile.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe fixed the mobile submenu colors so nested items are readable at every level, and restructured the accordion so each level is visually distinct.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eSubmenu colors fixed on mobile\u003c\/li\u003e\n\u003cli\u003eNested levels visually distinct\u003c\/li\u003e\n\u003cli\u003eAccordion behavior cleaned up\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155697954890,"sku":"TASK-0346","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"build-custom-mobile-menu-brooklyn","title":"Build Custom Mobile Menu","description":"\u003cp class=\"task-lead\"\u003eA brand wanted a better mobile menu modeled on a site they admired, with content the current menu was hiding.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eI want a mobile menu like this example. I have fixed text that isn't showing on mobile and the menu structure is confusing.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eA mobile menu that hid content and confused customers.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe rebuilt the mobile menu to match the reference structure, surfaced the missing content, and organized categories with clear expand and collapse.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eMobile menu rebuilt to the reference\u003c\/li\u003e\n\u003cli\u003eMissing content surfaced\u003c\/li\u003e\n\u003cli\u003eClear expand and collapse\u003c\/li\u003e\n\u003cli\u003eDesktop unchanged\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155699494986,"sku":"TASK-0367","price":0.0,"currency_code":"USD","in_stock":false}]}],"url":"https:\/\/www.taskhusky.com\/collections\/mobile-menu-hamburger.oembed","provider":"TaskHusky","version":"1.0","type":"link"}