fueko home fueko home

Navigation

There are two types of navigation: 'Primary' and 'Secondary'. The primary navigation is used in the theme header, while the secondary navigation is used in the footer.

Step-by-Step
  1. To add a navigation, go to the 'Navigation' settings in the Ghost Admin.
  2. Once here, you can remove any navigation items that you want by using the trash icon to the right of the item. You can add new items by just typing them in. You can change the order by clicking on the icon on the left and dragging it to the spot you want – the new columns in the 'Secondary' navigation will appear automatically after a few items.
  3. Once your items are added, click 'OK' to activate new navigation on your site.
Tip: How to change the number of items before 'dots' element in the header navigation? (Requires theme editing)
  1. You’ll need to open the theme’s ../partials/navigation.hbs file in your code editor.
  2. At the top, you’ll see the 'Header navigation' section.
  3. Replace the current to="3" and from="4" value with your own, for example to="4" and from="5".
  4. Save your navigation.hbs file in ../partials/ folder.
Tip: How to add your own column names in the footer navigation? (Requires theme editing)
  1. To add your own column names, you’ll need to open the theme’s ../locales/en.json file in your code editor.
  2. Then, add your own translations, for example:
{
    "Column 1": "About",
    "Column 2": "Features",
    "Column 3": "Support",
    ...
}
  1. Save your en.json file in ../locales/ folder.
Tip: How to change the number of items in column? (Requires theme editing)
  1. You’ll need to open the theme’s ../partials/navigation.hbs file in your code editor.
  2. At the middle, you’ll see the 'Footer navigation' section.
  3. The columns have a limit and from parameter, that needs to be changed. For example, to change the number of items to 5 for each column:
{{#foreach navigation limit="5"}}
...

{{#foreach navigation limit="5" from="6"}}
...

{{#foreach navigation from="11"}}
...

Another possible case is when you change elements up to e.g. 6 only for second column:

{{#foreach navigation limit="4"}}
...

{{#foreach navigation limit="6" from="5"}}
...

{{#foreach navigation from="11"}}
...
  1. Save your navigation.hbs file in ../partials/ folder.