Story theme
Story v2
Story v2
  • Story theme documentation
  • online store 2.0
    • The new experience
  • Header
    • Header styles
    • Toolbar
    • Navigation images
    • Image menus
    • Transparent header
    • Mega-menu navigation
    • Drop-down navigation
  • Sections
    • How to use sections
      • Adding a section
      • Hiding a section
      • Reordering sections
    • Section blocks
    • Complete list of sections and blocks in Story
  • Collections
    • Product badges
      • Sale badge
      • Savings badge
      • Sold-out badge
      • Custom badges
      • Badge settings
    • Collection filtering
      • Custom filter options
    • Collection sorting
    • Collection navigation
    • Feature image
  • Products
    • Upsell promotions
      • How to setup
      • Static upsell promotion
      • Custom upsell promotion
    • Product tabs
      • Static product tabs
      • Unique product tabs
    • Color swatches
    • Inventory countdown
    • Pre-order products
    • Size Charts
      • Static size chart
      • Unique size charts
      • Creating pages
    • Product image sizes
  • Cart
    • Cart styles
    • Shipping message
    • Estimate shipping calculator
    • Cart settings
  • Pages
    • Page navigation
    • How to use page templates
      • Story page templates when using a different theme
    • Contact page
    • Lookbook
    • Team
    • Timeline
  • Blogs
    • Blogs
    • Articles
  • Settings
    • Tile decoration
    • Enable container
  • Updates
    • Story Releases
    • Check your theme version
    • How to download latest version
  • Tips
    • Where to make CSS changes
    • How to add a line break in your headings
  • Advanced
    • Story tutorials
    • Remove Shopify link in footer
  • Contact
    • Share preview link
  • Earlier versions
    • Story v1
Powered by GitBook
On this page
  1. Header

Transparent header

Blend the main header and navigation with your hero or slideshow section

PreviousImage menusNextMega-menu navigation

Last updated 3 years ago

Activating the transparent header is Story is one from the Header section setting:

Alternate logo

Use the Alternate logo option to provide an image that works best with your transparent header.

Enable on pages

Choose which type of pages to display the transparent header. Most stores will display on the home page. You have to ability to also display on collection pages and blog post pages (article pages).

Sticky header

When using the sticky header feature, your customers will always have access to the header area while scrolling down the page. When you combine the transparent header feature with a sticky header, you can use two different logo images. The alternate logo image is used in the transparent header and the main primary logo image is used in the sticky header while your customer is scrolling:

In the above example, the main logo is dark and appears in the sticky header:

The alternate logo which is white, appears in the transparent header:

Additional tips when using a dark background as the header color:

Video: Dark headers with light hero images
Enable in the Header settings
Darker logo appears when scrolling down the page
Primary logo - Used while scrolling down
Alternate logo - Used in the transparent header