Add a Fixed Navigation Menu to Ghost

If you are looking to have a static navigation menu, here is how you can do it (we added some styling, but how you make it look is up to you):

  1. Create a navigation.hbs file if your theme doesn't have one yet

  2. Add or edit your navigation HTML code to format the navigation the way you want. Here is a basic one we setup:

  3. We are using flex boxes to create the navigation. Here is the CSS you need:

  4. The important parts of the CSS if you use something besides flexboxes is the Position: fixed;. That means that it will stick where you set it. Using Top: 0; will stick it to the top of the page and it will stay there. This also means that it will be either behind or in front of content. If it is behind the content, use z-index: 100; (or 1000 or whatever puts it in front, higher means more in front).

    Another thing to look out for is that the rest of the content may move up behind the menu. You should add a margin to the rest of the content to push it farther down below the nav.

The menu we have is basic but serves its purpose. There is much more you can add and customize, but the basics remain the same. Let us know if you have any questions in the comments below.