{"title":"Header \u0026 Navigation Customization","description":"\u003cp\u003eHeader \u0026amp; Navigation Customization 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 475 header \u0026amp; navigation customization requests for merchants, including work on Turbo, Symmetry, Atlantic and Icon. Below are 8 real examples with the request, the approach and what shipped.\u003c\/p\u003e","products":[{"product_id":"logo-size-and-position-in-header-turbo","title":"Logo Size and Position in Header","description":"\u003cp class=\"task-lead\"\u003eA footwear brand wanted their header split into two rows with the logo enlarged and centered in the top row.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eDivide the top header into two rows. Logo large and centered in the top row. Navigation in the second row underneath. Screenshots attached.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eThe single-row header cramped the logo.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe restructured the header into two rows: a top row with a large centered logo and utility icons at the edges, and a navigation row beneath. On mobile it collapses to a single row.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eTwo-row header on desktop\u003c\/li\u003e\n\u003cli\u003eLarge centered logo in the top row\u003c\/li\u003e\n\u003cli\u003eNavigation in the second row\u003c\/li\u003e\n\u003cli\u003eSingle-row collapse on mobile\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155681144906,"sku":"TASK-0164","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"add-items-and-icons-to-header-turbo","title":"Add Items and Icons to Header","description":"\u003cp class=\"task-lead\"\u003eA boutique wanted five header changes on their Underground theme, starting with how the dropdown preview behaved.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eI'd like five changes to the header. When the cursor highlights a dropdown, the preview bar should show the category image. Add the account icon. Add a wishlist icon. And so on.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eA header punch list from a merchant who knew exactly what they wanted.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe worked through all five: category image in the dropdown preview, account and wishlist icons added, search moved, and spacing adjusted. Each change was checked on desktop and mobile.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eCategory image in dropdown preview\u003c\/li\u003e\n\u003cli\u003eAccount icon added\u003c\/li\u003e\n\u003cli\u003eWishlist icon added\u003c\/li\u003e\n\u003cli\u003eSearch repositioned\u003c\/li\u003e\n\u003cli\u003eSpacing adjusted\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155681603658,"sku":"TASK-0176","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"announcement-bar-and-top-bar-above-header-turbo","title":"Announcement Bar and Top Bar Above Header","description":"\u003cp class=\"task-lead\"\u003eA brand wanted their announcement bar moved from above the header to below the main menu, without breaking the mega menu.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eCan the top bar with the announcement message be moved to underneath the main menu, without affecting the mega menu?\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eA layout preference that touched the navigation.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe moved the announcement bar below the main navigation and confirmed the mega menu still opened and positioned correctly with the bar in its new place.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eAnnouncement bar moved below the main menu\u003c\/li\u003e\n\u003cli\u003eMega menu unaffected\u003c\/li\u003e\n\u003cli\u003eMobile layout adjusted to match\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155688157258,"sku":"TASK-0236","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"header-background-and-transparency-turbo","title":"Header Background and Transparency","description":"\u003cp class=\"task-lead\"\u003eA footwear brand wanted a transparent header over the homepage hero that turned solid as the customer scrolled.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eWe want the header transparent over the homepage banner so the image runs edge to edge, then solid white when the customer scrolls down. Logo switches from white to dark at the same time.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eA cinematic homepage look the theme didn't support out of the box.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe made the header transparent on the homepage with a light logo, transitioning to a solid background and dark logo on scroll. Interior pages keep the solid header throughout.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eTransparent header over the homepage hero\u003c\/li\u003e\n\u003cli\u003eSolid header and dark logo on scroll\u003c\/li\u003e\n\u003cli\u003eLight and dark logo variants\u003c\/li\u003e\n\u003cli\u003eSolid header on interior pages\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155688386634,"sku":"TASK-0241","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"sticky-and-fixed-header-symmetry","title":"Sticky and Fixed Header","description":"\u003cp class=\"task-lead\"\u003eA brand evaluating a theme during its free trial wanted to know if a sticky header and product popups could be added before purchasing.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eWe're trialing the theme before purchasing. During the trial we want to confirm a sticky header and product popups from shortcodes can be added. If yes, do it.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eA purchase decision hinging on two features.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe added the sticky header and built the product popup so a short code in any page's content opens a product panel. The brand purchased the theme with both features in place.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eSticky header added\u003c\/li\u003e\n\u003cli\u003eProduct popup from page content\u003c\/li\u003e\n\u003cli\u003eBoth working before theme purchase\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155694153802,"sku":"TASK-0276","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"mobile-header-specifically-symmetry","title":"Mobile Header Specifically","description":"\u003cp class=\"task-lead\"\u003eA brand's mobile header hid search, cart, and account inside the menu. They wanted them visible in the header.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eCurrently the search bar, cart, and account are hidden in the menu and not visible until you open it. I want them in the mobile header so customers see them immediately.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eCore actions one tap too deep.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe placed search, cart, and account icons in the mobile header alongside the menu button, with the cart showing an item count, and kept the header compact.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eSearch, cart, and account icons in the mobile header\u003c\/li\u003e\n\u003cli\u003eCart item count\u003c\/li\u003e\n\u003cli\u003eCompact header layout\u003c\/li\u003e\n\u003cli\u003eDesktop unchanged\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155694874698,"sku":"TASK-0290","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"multi-row-and-two-tier-header-atlantic","title":"Multi-Row and Two-Tier Header","description":"\u003cp class=\"task-lead\"\u003eA studio wanted a two-tier header: utility links on top, main navigation beneath, plus text links converted to buttons sitewide.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eTwo-tier header with our booking and account links on top and main navigation beneath. And change all the Learn More, Book Now, and Register links to buttons.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eA header and a sitewide button convention in one request.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe built the two-tier header with utility links above the main navigation, and converted the named text links into styled buttons across every page.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eTwo-tier header\u003c\/li\u003e\n\u003cli\u003eUtility links in the top row\u003c\/li\u003e\n\u003cli\u003eNamed links converted to buttons sitewide\u003c\/li\u003e\n\u003cli\u003eMobile header collapsed\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155698610250,"sku":"TASK-0360","price":0.0,"currency_code":"USD","in_stock":false}]},{"product_id":"navigation-text-size-and-font-and-spacing-icon","title":"Navigation Text Size and Font and Spacing","description":"\u003cp class=\"task-lead\"\u003eA brand wanted the navigation text larger with wider letter spacing to match their brand style.\u003c\/p\u003e\u003ch2\u003eThe request\u003c\/h2\u003e\u003cblockquote\u003e\n\u003cp\u003eThe navigation text is too small and cramped. Increase the size, widen the letter spacing, and make it feel more editorial.\u003c\/p\u003e\n\u003ccite\u003eOriginal customer request, anonymized\u003c\/cite\u003e\n\u003c\/blockquote\u003e\u003cp\u003eNavigation that didn't match the brand's typographic voice.\u003c\/p\u003e\u003ch2\u003eThe approach\u003c\/h2\u003e\u003cp\u003eWe adjusted the navigation typography with larger text and wider spacing, checked it didn't wrap at common desktop widths, and left mobile navigation sized appropriately.\u003c\/p\u003e\u003ch2\u003eWhat we shipped\u003c\/h2\u003e\u003cul\u003e\n\u003cli\u003eNavigation text enlarged\u003c\/li\u003e\n\u003cli\u003eLetter spacing widened\u003c\/li\u003e\n\u003cli\u003eNo wrapping at common widths\u003c\/li\u003e\n\u003cli\u003eMobile navigation sized separately\u003c\/li\u003e\n\u003c\/ul\u003e","brand":"TaskHusky Portfolio","offers":[{"title":"Default Title","offer_id":44155700215882,"sku":"TASK-0382","price":0.0,"currency_code":"USD","in_stock":false}]}],"url":"https:\/\/www.taskhusky.com\/collections\/header-navigation-customization.oembed","provider":"TaskHusky","version":"1.0","type":"link"}