Add a Fixed Sidebar to Your Ghost Blog

Having a fixed sidebar with your blog's title, menu, social media links, or whatever else is very popular with Ghost themes. Here is a picture of the final product and how you can impliment it yourself:

Fixed sidebar final product

We are going to be editing the Casper theme to get it to look like this and if you use the GitHub link at the top of the page, you can download or check out the theme in its entirety with the code used here.

We did just super basic styling and information as that will be different for everyone, but the concept of the fixed sidebar will remain the same.

  1. The first thing we need to do is to put the blog content into two seporate divs. One for the sidebar, and the other for the blog content. Inside the default.hbs file, we wrap all of the content in a content-flex div, and then have two seporate divs inside. One for the sidebar, and the other for the blog content.

    So, we put the sidebar into its own container so we can set the width of the container to make sure that the blog content doesn't bleed into the sidebar. Inside this sidebar, we have code for using the blog cover image as the background, show the blog title and description, the blog logo, and then the navigation menu. Then, inside the content-body, you have all of the blog content (index.hbs, post.hbs, etc) and the footer. Here is the code we use:

  2. Update your navigation.hbs to match the style you wish to use. If you are changing Casper, like we are, there are a number of things you have to change with the navigation. This is because it uses a menu button and slides in from the right side. So, we changed all of the classes so they wouldn't take the existing CSS and then removed the menu button.

    This created a pretty stripped down version of navigation, but it works for this purpose and can be built upon. You can style it however you would like. Here is our navigation.hbs:

  3. If you are using Casper, or a theme that has all the blog content in a header, remove that header code from your index.hbs, post.hbs and any other hbs files that may have the header also.

  4. Lastly, we need to add all the CSS. Since we have the two main div's setup, we are going to use flexboxes to keep them next to each other. So, we are going to set content-flex to display: flex;.

    For the sidebar CSS, we need to set the width, height, and the position to fixed so it won't scroll or move when the rest of the page moves. Here is what that CSS looks like:

    And lastly we need to set the style for the content-body to flex: 1; so that it will take up the width rest of the screen.

    Thats it for the CSS, not too many lines which is good. Here is the full css that we use that also has a little bit of styling for making the text centered, the logo a circle, etc:

This should get you started on creating your static sidebar! Lots more styling and customizing can be done, but this will get you a lot of the features that most sidebar's use. Hope this helps and let us know if you have any questions in the comments below.