Learn Ghost

Young blogging platform build on tope of node.js for fast loading speed and easy scalability!

• Last Updated: 05/12/2020
• ( 3 minutes reading )

How to add and edit navigation menus in your Ghost blog

Introduction

Navigation menus are typically located in the header of your blog. When placed correctly, navigation menus can provide ease of access for your viewers. This is very important, as visitors can lose interest very quickly if they are unable to find what they are looking for. Consequently, this may result in increasing the bounce rate, which is something you want to avoid. In this tutorial, we are going to go over the way you can add navigation menus and edit the current ones using the Ghost publishing platform! Let’s get started!

 

Accessing the Design section

For a start, you have to log into your Ghost Admin Dashboard. To do so, please open your favorite browser and enter your domain name, followed by "/ghost". For example:

  • ghost.hostarmadatutorials.com/ghost

 

Login page

 

Once logged in, please navigate through the left-hand sidebar to Settings Design.

 

Access Design section

 

Upon doing that, you will be redirected to the "Design" page where you can create and manage navigation menus.

 

Primary and Secondary Navigation sections

 

As you can see, the "Design" page consists of two separate sections - “Navigation” and the “Secondary Navigation”. We will review them individually and explain what you can control with each of them.

 

Primary Navigation Menu

"Primary" is the navigation menu displayed at the top left side of your Ghost blog's Home page. Using the text fields provided under the “Navigation” section, you can change the names and destination URLs of the menu items assigned to it.

 

Edit Primary menu items

 

If you want to edit a particular menu item, you have to click on the corresponding row.

If you want to add a new menu item, click the greyed our “Label” field at the bottom of the table. Once you specify the desired item name, please enter the URL destination in the middle field. When ready, please click the green plus “+” icon on the far right side of the row. Finally, to save your changes, please press the “Save” button located on the top right corner of the page.

 

Save New Menu Item

 

In addition to creating new links on the menu, you are also able to reorganize them. To do that, all you need to do is click and hold the eight-dot icon in front of the corresponding menu item.

 

Organize Menu Items

 

After you have a hold of the link, simply drag and drop it to the desired position. The order in which they appear determines their consequence in the navigation bar on the website frontend.

 

Secondary Navigation Menu

A completely new Ghost installation would typically have no secondary navigation menu by default. If you want to add it, please point your attention to the table under the “Secondary Navigation” section. 

 

Secondary Navigation Menu table

 

To set a name, please click on the greyed-out “Label” field and enter the desired name. Into the second empty field, you have to specify the URL destination where this menu item will lead to upon clicking. Finally, when you are ready to deploy it, press the plus “+” button located at the far right side of the row. 

 

Save Menu Item

 

To save your new link and display it on your frontend, please click the “Save” button located on the top right corner of your page.

Moving the links in the secondary navigation menu is analogical to the method explained under the “Primary Navigation Menu” heading.

 

There you have it! The way to add new or edit existing navigation menus and populate them with menu items in the Ghost publishing platform. We hope that this information was sufficient enough for you to be able to manage these menus effectively from now on.

 

 

...
Sebahat
Content Marketing Specialist

Sebahat is a young and bright woman who has become an invaluable part of our team. She started as a Customer Care Representative, mastering that role and, along the way, growing into a tech-savvy individual who is well acquainted with every support layer of the company. Driven by her aim to improve our customers’ experience constantly, she is committed to enhancing the extraordinary support we deliver.