It wasn't the way I wanted it. I had words up in the right hand corner that I couldn't see, and I wanted icons. Not the social media ones, I may deal with them later, but neat little icons for the sections, and a board showing the things I currently work with on this site.

So much to learn, so much to fight with. It's no wonder I have on my Grumpy Fuckers shirt right now.

If you want to find a cool way to get your Ghost secondary menu to turn into social media icons, here's a neat little tutorial to help you get there.


I wanted more than they thought they would give me. It was my design to have both menus as icons. The top is now Font Awesome icons that cover each of the major sections (this one is in Code, for example). It was all done with css and Handlebars.

I know jack shit about Handlebars. Know a little more than I did, now. You will end up with all of your icons standing straight up and down like you might have done when you were twelve. The confusion is the same.

This is fixed (the best way I finally could) by adding a little css code in your code injection section.

The problem is that while you might have the main-nav set to display: inline; that only gets seen as the block, and not the contents. You will need to correct it to .main-nav, li that li is important, because it is what triggers all of the icons to lay down in a nice flat row.

For me, this affected both the top main bar and the bottom nav I am using as a brand list.

The answer is that you can in fact affect the main navbar and make it icons.

Another part of this magic is that the SVG sprites are colored using a hex code in the fill part of the symbol code. I'll probably update this later to hold all of the stuff so you can see it. Check my Codepen here for a taste of it.