Overview

The Story Header sits above the first content section. Use it to control your story's branding, navigation, sharing, and progress.

Logos: A logo supplied by the story theme and an optional story-specific logo
Section navigation: Links to story sections marked Add to nav in the section options panel
Sharing buttons: Optional LinkedIn, X, and Facebook buttons
A reading progress bar: An optional visual indicator that updates as the reader scrolls
Colours: Theme or custom text and background colours for the Story Header

Customise the Story Header

Open Header Options

Open the story in the Shorthand editor.
Find Story header at the top of the section list on the left.
Select the cog icon beside the Story Header thumbnail.

Hand pointer showing the Header options cog beside the Story Header thumbnail

Select the cog icon beside the Story Header thumbnail.

Choose what appears in the Story Header

The Header options panel controls the Story Header's visibility, theme logo, reading progress bar, colours, and advanced identifiers.

Header options panel with a hand pointer showing the Header visibility switch

Use Header Options to control the Story Header's visibility, logo, progress bar, colours, and advanced settings.

Control	What it does
Header visibility	Shows or hides the Story Header.
Theme Logo	Shows or hides the logo supplied by the story's theme.
Reading progress bar	See Add a reading progress bar for setup and colour options.
Colour	Uses the theme colours or custom text and background colours.
Advanced options	For developers targeting the Story Header with CSS or anchor links. Copies the `#header` section ID or adds a custom CSS class with the `.sh-` prefix.

Change the Story Header colours

Open Header options.
Under Colour, select Theme to use the theme colours, or select Custom to choose your own.
If you select Custom, choose a Text colour and Background colour from Theme Colours or Story Colours.
Optional: Under Story Colours, select the plus button to add a colour to the story palette.
Preview the story and check that the logo, navigation labels, and sharing buttons remain easy to read.

Hand pointer showing the Custom Story Header colour control with text and background colour palettes

Select Custom to choose your own text and background colours, or select Theme to use your story theme's default colours.

Add a story-specific logo

Select the plus icon labelled Add a logo in the Story Header.
Under Large Screens, upload the logo for screens that are 900 px or wider.
Optional: Under Small Screens, upload a different logo for screens under 900 px wide.
Add useful alt text for each logo.
Optional: Add a destination URL shared by both logo images. Start the URL with https:// or http://.
Select Save Changes.

Select the plus button in the Story Header to add a story-specific logo.

For logo formats and sizing guidance, see Adding logos to a Story Header.

Tip: Preview the large- and small-screen logos at desktop and phone widths before publishing.

Show or hide individual sharing buttons

Select the LinkedIn, X, or Facebook icons in the Story Header.
In Edit social buttons, switch each sharing button on or off.
Select Edit story social settings to change the image, title, and description used when readers share the story.

Hand pointer showing the LinkedIn, X, and Facebook buttons with the Edit social buttons menu open

Select individual sharing buttons in the Story Header to toggle them on or off.

Add sections to the Story Header navigation

Select the section thumbnail in the section list.
Turn on Add to nav.
Enter a clear label in the section title field.
Preview the story and test the navigation link.

Hand pointer showing the Add to nav control below a section thumbnail

Turn on Add to nav in the section options to include a section in the Story Header navigation.

Only sections marked Add to nav appear in the Story Header navigation.

For more details about section labels and mobile behaviour, see Create a navigation menu.

Best practices and troubleshooting

Preview every layout: Check the Story Header at desktop and phone widths.
Use a small-screen logo when needed: A narrower logo can prevent overlap with navigation and sharing buttons.
Write useful alt text: Describe the logo for readers who use assistive technology.
Check the published URL: A self-hosted story needs the correct published URL before its sharing buttons can link to the final story.
Keep navigation labels short: The section title becomes the label shown in the Story Header navigation.
Check custom themes and code: A custom theme, custom CSS, or custom JavaScript can override the standard Story Header appearance.

Note: If the Story Header looks different in Preview or after publishing, check whether the story uses a custom theme or custom code.

Contact [email protected] if you need assistance.

FAQs

Can I hide the entire Story Header?

Yes. Open Header options and turn off Header visibility.

Can I hide the theme logo but keep the rest of the Story Header?

Yes. Keep Header visibility on, then turn off Theme Logo.

Can I hide only one sharing button?

Yes. Select the sharing icons in the Story Header, then turn LinkedIn, X, or Facebook off in Edit social buttons.

Can the logo link to another website?

Yes. Open Add a logo and enter the destination under Add a link. The URL must begin with https:// or http://.

Why is a section missing from the Story Header navigation?

The section must have Add to nav turned on. Add a clear section title, then preview the story to confirm that the navigation link appears.

Can I use a different header colour for each story?

Yes. Each story has its own colour setting. Open Header options, select Colour, then choose Custom and set the text and background colours for that story.