Ghost supports the creation of static pages, however to add your static pages to a navigation menu, you’ll have to edit your theme’s HTML files. This guide will walk you through how to edit your theme’s navigation menu. If you’re not sure how to create a static page, read our full instructions here on how to publish static pages.
Locate your theme’s navigation menu
To begin, you’ll need to first locate your theme’s navigation menu. Several theme creators will include files such as, nav.hbs, navigation.hbs, menu.hbs, etc in the partial directory of a theme – while others will include the navigation menu directly in the default.hbs file. It’s important to read through the documentation of your theme to locate the portion of code you’ll need to edit.
In this particular theme, the navigation file we’ll be working with is located at in the partialsdirectory, and is called menu.hbs. The code should look similar to this:
<a href="/about">About</a> <!-- <a href="/">Blog</a> --> <!-- <a href="/">Product</a> -->
You’ll notice that the creator of this theme has already placed in a few links within the file to use as examples to get you started.
Find your static page’s URL
To add the link to your navigation menu, you will need to find the URL assigned to your static page. If you’re not sure what the URL is, you can access the page from your blog admin area, and click on the “gear” icon, to view your Post Settings.
Add your links to the navigation code
Next you will need to add some anchor tags to link out to the static pages. Let’s say, for example, I’ve got an “About Me” and a “Contact” page that I want to include in my navigation menu. For my current theme, I would edit the code by changing the
href in the
<a> tag to match my static page’s URL, like so:
<a href="/about-me">About Me</a> <a href="/contact">Contact</a> <a href="/">Blog</a>
Save and upload your theme
Once you’ve added your static page links to your navigation menu, you’ll want to save the file, and then re-upload your theme to your blog. Once uploaded, your navigation menu changes should appear immediately.
To upload your theme, you’ll need to access your blog’s settings on Ghost.org. If you need help, checkout How to upload a theme to your Ghost(Pro) blog or contact us at [email protected] for additional Ghost(Pro) support.