|  Pipeline theme
Latest
Latest
  • About Pipeline
    • Pipeline theme documentation
    • Learn Pipeline
  • Updates
    • What's new in Pipeline
    • Pipeline releases
  • Sections
    • Pipeline sections
      • Explore all the sections
      • Accordion group
      • Accordion single
      • Blog posts
      • Collections list
      • Collection product grid
      • Contact form
      • Custom HTML
      • Custom Liquid
      • Custom content
      • Featured article
      • Featured product
      • Gallery
      • Gallery text
      • Icon columns
      • Image banner
        • Countdown timer
        • Collage
      • Image with text
      • Logo list
      • Map
      • Mosaic
      • Newsletter
      • Page
      • Product grid
      • Product slider
      • Product slider tabs
      • Products with image
      • Recently viewed products
      • Rich text
      • Scrolling promotion
      • Shop the look
      • Slideshow
      • Tabs
      • Text columns with images
      • Video
      • Video banner
  • Settings
    • Theme settings
      • Global theme settings
      • Color
      • Typography
      • Layout
      • Search
      • Product card
      • Product form
      • Cart
      • Social media
      • Currency
      • Favicon
      • Advanced
      • Checkout
      • Custom CSS
      • Theme style
  • Header
    • Announcement bar
      • Settings and colors
      • Free shipping message
      • Text announcement
      • Icon column
      • Custom HTML
    • Header
      • Header styles
      • Icon styles
      • Toolbar
      • Navigation images
      • Collection block
      • Linking to menu items
      • Transparent header
      • Sticky header
      • Highlight sale menu
      • Collection images
  • Footer
    • Pipeline footer
      • Footer
      • Subfooter
  • Products
    • Product pages
      • Pre-orders
      • Breadcrumbs
      • Tabs and accordions
      • Tabs with metaobjects
      • Product page layout options
      • Product zoom
      • Inventory count down
      • Size charts
      • Unique product content
      • Alt-text sizing information
      • Swatch size
      • Color swatches (legacy)
      • Product siblings
      • Complementary products
      • Buy it with
  • Collections
    • Collection pages
      • Subcollections
      • Badges / Stickers
      • Custom filter options
      • Collection sorting
      • Layout options
      • Speed performance
  • Cart
    • Pipeline Cart
      • Cart types
      • Cart page
      • Cart drawer
      • Cart popup
      • Editing cart text
      • Cart upselling
      • Settings
  • Promotions
    • Upselling
      • Complementary products
      • Buy it with
      • Upsell with Quick View
      • Cart upselling
      • Upsell multiple products
      • Basic version
  • overlay
    • Cart drawer
      • Drawer cart
      • Popup cart
    • Popups
      • Cookies consent message
      • Newsletter popup
      • Text popup
  • Siblings
    • Product siblings
      • About product siblings
      • How to setup siblings
      • Siblings metafields
      • Cutline
      • Siblings collection
      • Siblings product setup
      • Add siblings block
  • Search
    • Predictive search
  • Pages
    • Page templates
      • Overview
      • Unique page content
  • FAQ
    • Frequently asked questions
      • Default theme content
      • Context picker
      • Check your theme version
      • Share preview link
      • How to download latest theme version
      • Migrating your settings
      • Improving the speed of your site
      • Optimizing performance of your Product Card & Collection pages
  • Apps
    • Shopify apps
      • Supported apps
      • App integration
      • Search and Discovery
  • License
    • Theme license
  • Support
    • Contacting support
Powered by GitBook
On this page
  • Menu | Logo | Cart
  • Logo | Menu | Cart
  • Logo | Spacer | Menu + Cart
  • Mobile drawer menu
  • How to
  • Toubleshooting large menus showing mobile mode
  • Examples
  1. Header
  2. Header

Header styles

Pipeline includes several header styles and configuration options

PreviousHeaderNextIcon styles

Last updated 15 days ago

Flexible layout options allow you to easily configure your brand logo, menu items, and links.

Menu | Logo | Cart

This style places the brand logo in the middle with navigation on the left and account, search, and cart on the right:


Logo | Menu | Cart

This style places the brand logo to the left with the navigation in the center. Account, search, and cart icons are placed to the right of the navigation:


Logo | Spacer | Menu + Cart

This style places the brand logo to the left, and adds spacing to push the navigation on the right next to the cart:


Mobile drawer menu

This style adopts the mobile design pattern used on all mobile devices. This style is the cleanest option, hiding the navigation into a mobile-style drawer and keeping consistency between mobile and desktop:

How to

Choose a layout option from the Header style drop-down:

Customize the style using search and icon checkbox options:

Toubleshooting large menus showing mobile mode

Certain conditions can lead to the mobile menu showing instead of the desktop menu. 1) Too many items in the menu will force the mobile menu to show. This depends on the size of the screen and the number of menu items. It would also include the length of the menu items. Viewing the theme inside the theme editor can also result in this issue since the theme editor sidebars reduce the page width. Reducing the text length or the number of top-level menu items can help. 2) Another issue may be the type of device. If the device is a touch device - then we may show the mobile menu. The mobile menu is more suitable for touch devices. For example, using a 2 in 1 device can lead to this issue even in desktop mode

Examples

Additional examples combining layout and icons or text:

Preset - Menu | Logo | Cart
Preset - Logo | Menu | Cart
Preset - Logo | Spacer | Menu + Cart
Preset - Mobile drawer menu
Navigation slides out when opened
Cart, Search and Account can be displayed as icons
Menu | Logo | Cart, using icons option
Logo | Spacer | Menu + Cart