Set up your site menu

The links in your header and footer menus come from Ghost, not from Fantasma. You edit them in Ghost Admin, and Fantasma decides how they look. The header shows Ghost's primary navigation, and the footer shows the secondary navigation.

Edit the menu links in Ghost

1. In Ghost Admin, go to Settings, find Navigation under Site, and click Customize.
2. Add, rename, reorder or remove the items of the primary or the secondary navigation.
3. Save your changes in Ghost.

Your site shows the new links right away, with no need to publish your theme again. In Fantasma, the canvas shows sample links until you switch the preview to your own site, as Preview with your Ghost content and members describes.

Make a dropdown

Ghost has no setting for dropdowns. Your Fantasma theme builds them from the labels. An item whose label starts with a hyphen and a space, - , becomes part of a dropdown under the item above it.

1. In Ghost Admin's navigation settings, add the item for the dropdown, such as Resources, with its link. Ghost needs a link for every item. If the item has no page of its own, give it the address of the first page in its list.
2. Add each item that goes into the dropdown right after it in the list, with - in front of its label, such as - Documentation.
3. Save your changes in Ghost.

Your site drops the - and shows the label alone. The secondary navigation makes dropdowns the same way, in the footer. The hyphen needs the space after it, so -Documentation or a longer dash stays a normal item. A dropdown has one level.

In the header, the dropdown opens when a visitor points at the item, and the item stays a link. Keyboard users open it with a button beside the item and close it with Esc. In a stacked menu, such as the phone menu, tapping the item opens and closes its list instead of following its own link. If the item links to a page of its own, add that page to its dropdown too, such as - All resources.

Choose which menu shows

The header and footer hold a Navigation Menu block that shows one of the two Ghost menus.

1. In the icon rail, click the second icon, Layouts.
2. In the Layouts list, click Default.
3. On the canvas, click the menu links in the header. Each click selects one level deeper, so click again until the right sidebar shows Navigation Menu.
4. Under Menu, click Primary or Secondary.

Layout sets Row, with dropdowns, or Stack, with lists that open on a tap. Justification places the links on the Left, Center or Right. The footer's menu is a Navigation Menu block too, set to Secondary. Navigation Menu describes every setting. A new project has one layout, Default, which every template uses. If you added more layouts, each has its own header and footer, and its Used by list shows the templates that use it.

Keep the header on screen

1. In the Default layout, under Sections in the left sidebar, click Navigation.
2. In the right sidebar, under General, turn on Sticky.

The header stays at the top of the window while visitors scroll. It is off by default.

Change the menu on phones

On screens narrower than 672 px, the header shows a menu button instead of the links. It opens a panel named Mobile menu, listed under Overlays in the layout. The panel holds the same Ghost menu, stacked, with the sign-in buttons below. To change what it holds, open the layout as above and click Mobile menu under Overlays in the left sidebar, below Sections, then click its blocks on the canvas to edit them, as Add blocks to a section describes. Navigation section explains the menu button.

The changes you make in Fantasma reach your site when you publish your theme or upload it again. Changes to the links in Ghost Admin show at once.