The Navigation section draws your site header: the logo, the menu, search, and the Sign in and Subscribe buttons. It sits in a layout, so one header shows on every template that uses that layout. When you select it on a template, the panel says which layout it belongs to, and Change in layout editor opens that layout. Click the header on the canvas to open its settings panel; "the + menu" below is the + beside a group's name in that panel. Change the header and footer on every page describes layouts, and how to give some templates another header.
Header patterns
The Header category of the pattern picker, which opens from the + beside Sections, holds six ready headers.
Pattern
Top row
Second row
Standard
Search on the left, logo in the center, Sign in and Subscribe on the right
Menu links, centered
Logo Left
Logo and menu links on the left, search, a Dark Mode Toggle, Sign in and Subscribe on the right
None
Centered Logo
Menu links on the left, logo in the center, search, Sign in and Subscribe on the right
None
Minimal
Logo and menu links on the left, search and a Dark Mode Toggle on the right
None
Subscribe Focus
Logo in the center, Subscribe on the right
Menu links, centered
Creator Minimal
Logo and menu links on the left, Subscribe on the right
None
The menu links come from the navigation you set in Ghost Admin, and the logo is the publication logo from Ghost Admin, shown by the Site Logo block. To drop Sign in or Subscribe, delete that button like any block. Set up your site menu explains the menu, dropdowns and the menu on phones.
General
Setting
What it does
Sticky
Keeps the header at the top of the browser window while visitors scroll, on your site and in the preview. It is off by default. With it on, a link to a section's anchor stops the page below the header, so the header does not cover the section's top.
Colors
Setting
What it does
Color Scheme
The header's background and text colors, from your color schemes. Default uses the site's scheme. The Inherit, Light and Dark icons beside Theme in its list choose light or dark colors. Inherit follows the site's color mode.
Background
A color that fills the header in place of its scheme's background. None by default. Add it from the + menu.
Gradient
A gradient over the header's background: None, one of the gradients saved in Styles, or Custom. Add it from the + menu.
Text color
The color of the header's text, and of the blocks inside that have no Text color of their own. Add it from the + menu.
Layout
Setting
What it does
Content Width
How wide the row of logo, menu and buttons can grow: Full, Wide (the default, 1400 px), Standard, Narrow, or a length you enter. Set it with the Content Width button on the toolbar over the selected header, or add it from the + beside Layout.
Min Height
The least height of the header, with the values in Layout settings. Add it from the + menu.
Width and Align
Show only on a header that already has a value for them, as some header patterns do. You cannot add them. Width narrows the whole header, background included. Align places the row of blocks inside it.
Spacing
Setting
What it does
Padding
Space between the header's edges and its blocks. By default there is none at the top and bottom, and Small (24 px) at the sides. The header patterns put the space above and below on the Groups inside instead, so change the Padding of those Groups to make the header taller.
Margin
Space outside the header. Add it from the + menu.
Padding and Margin are the same on every screen size. To change spacing on phones, change the padding of the Groups inside the header.
Advanced
The + beside Advanced adds HTML anchor, CSS classes and Custom CSS. Advanced settings describes each one.
Unlike a Section, a Navigation has no Appearance and no Display group. To hide a part of the header on some screen sizes, set Display on the Group or block inside it.
The menu that opens on phones is not part of the Navigation. It is a Dialog section named Mobile menu, listed under Overlays in the same layout. The header patterns include a menu button that shows only on phones, below 672 px. Its On click is Open dialog, with Mobile menu as its dialog. Change what the phone menu holds by editing that dialog.
A project made in Fantasma 1 can have a Built-in Menu inside its Navigation instead. It still opens from the menu button. Select it in the sidebar to change what it holds and on which screens it shows. You cannot delete it or add a second one. New projects use a Mobile Menu dialog in Overlays instead.
The Navigation section draws your site header: the logo, the menu, search, and the Sign in and Subscribe buttons. It sits in a layout, so one header shows on every template that uses that layout. When you select it on a template, the panel says which layout it belongs to, and Change in layout editor opens that layout. Click the header on the canvas to open its settings panel; "the + menu" below is the + beside a group's name in that panel. Change the header and footer on every page describes layouts, and how to give some templates another header.
Header patterns
The Header category of the pattern picker, which opens from the + beside Sections, holds six ready headers.
The menu links come from the navigation you set in Ghost Admin, and the logo is the publication logo from Ghost Admin, shown by the Site Logo block. To drop Sign in or Subscribe, delete that button like any block. Set up your site menu explains the menu, dropdowns and the menu on phones.
General
Colors
Layout
Spacing
Padding and Margin are the same on every screen size. To change spacing on phones, change the padding of the Groups inside the header.
Advanced
The + beside Advanced adds HTML anchor, CSS classes and Custom CSS. Advanced settings describes each one.
Unlike a Section, a Navigation has no Appearance and no Display group. To hide a part of the header on some screen sizes, set Display on the Group or block inside it.
Blocks
A Navigation holds up to 20 Groups at its top level, with the logo, menu, search and buttons inside them. Its blocks are the Site Logo, the Navigation Menu, Search, Button, Dark Mode Toggle, Social Links and the other blocks a Group takes.
The menu on phones
The menu that opens on phones is not part of the Navigation. It is a Dialog section named Mobile menu, listed under Overlays in the same layout. The header patterns include a menu button that shows only on phones, below 672 px. Its On click is Open dialog, with Mobile menu as its dialog. Change what the phone menu holds by editing that dialog.
A project made in Fantasma 1 can have a Built-in Menu inside its Navigation instead. It still opens from the menu button. Select it in the sidebar to change what it holds and on which screens it shows. You cannot delete it or add a second one. New projects use a Mobile Menu dialog in Overlays instead.