Ghost Casper Navigation Not Responsive?

I just spent several days modifying the Casper theme. I have everything working and looking exactly as I want. In the Design tab, I have added two additional entries, and in screen.css I have increased the font size a bit, and added underlining on hover. However, I just now realized that the Casper navigation is not responsive – when viewed on a mobile-sized device, I would expect the menu to be collapsed into a hamburger icon, allowing all entries to be accessed by tapping on the icon. However, the navigation in both my modified Casper and the one I downloaded as a starting point do not do this (you can see this in the assets/screenshot-mobile.jpg for base Casper). Can this be fixed? Suitability for mobile users is a must!

If you’re up to it, Casper is a super flexible theme and I think it was more designed to show the potential of ghost. It only took me a couple minutes to setup a responsive menu like what you’re talking about in my sites. Theres lots of frameworks out there like Zurb Foundation for Sites with these features built in that you can easily add into Casper and pretty quickly add in a second menu. Then just hide the one on a big screen, show the other a small screen and vice versa.

I believe the reason there isn’t one built in is Ghost is trying to go very minimalist, a reason its been so successful. If you want more help let me know.

Thanks for the reply. I have been using Foundation for Sites for years for our website, but I’m just now starting to work on our Ghost theme. If you could give me some hints on what parts of Foundation need to be added to the theme and where, I would greatly appreciate it. For now, I’ve shortened the menu items text so that it will fit on a smartphone screen, but I would certainly like a more flexible solution. I’m wondering if a potential solution in already somewhere in Casper, because the description text displayed using the index.hbs file gets wrapped to a second line when viewed on a smartphone screen, while my menu items are truncated.

Could you try horizontally scrolling? As far as I’m aware, the nav menu is scrollable.

Yes, I noticed that, but how is the user supposed to know that? In my case, the menu items I am using happen to break between two items (words), so it appears that only those items are available, and, according to the comment in screen.css under .site-nav-left, any scroll bars are hidden. I doubt that it is intuitively obvious to my users that only the menu is scrollable left and right.

Thank you for the suggestion to use Foundation, although there was still a learning curve involved for me, as my current Foundation-based website uses Foundation 6.2 with jquery 2.2.2, while the Casper theme seems to require jquery 3.2.1. I had to download the 6.5 Foundation files and refer to the docs on the changes to the menu coding from what I could pull from my website. The trick is to completely write the navigation in default.hbs using Foundation, rather than try to let Ghost build it from my site settings.

I took your advice and incorporated the Foundation top bar menu into my Casper-modified theme. Since our main website uses this, it provides nice branding consistency for our blog site. However, there is one quirk that has me stumped. The menu on the home, post and other pages works as expected – when viewed on a small screen, the menu is collapsed and a “Menu” button is shown to open and close the menu. I also wanted the top menu to be “sticky” in Foundation terms, but when I added that feature, only the menu on the home (index.hbs) page remained at the top of the display. On all the other blog pages, the top menu scrolled up along with the page content. To further confuse me, on a small screen all the pages scrolled off the top. Any ideas on why this is happening? Our blog is located at https://stout-bowman-associates-llc.ghost.io/. Thanks in advance for any help or advice you can give me.

An update to this comment: digging deeper into the docs, I found that the best place to code the Foundation-based menu was to create a ./partials/navigation.hbs file and put the menu coding in there, with the handlebars to pull the menu items from the Design tab.

OK, here’s the final resolution for anyone else trying to get this to work. I used Foundation 6.5.1 files foundation.min.css and foundation-icons/foundation-icons.css (I am using two icons from this file, if you don’t need them you do not need to include this file). Place the stylesheet links for foundation.min.css and any .css file for styling your top navigation bar before built/screen.css in default.hbs - stored them in the assets folder and used {{assets}} to access them. I also added an app.css file as the last stylesheet link to override some of the styles that screen.css was using for the Casper menus that I wanted to change. At the end of the body tag in default.hbs, add links to foundation.min.js and what-input.js from the foundation code, as well as an app.js file to initialize Foundation and any other javascript you might want. One important change was to add style=“z-index:10000” to the two navigation bars sticky containers - I wanted the top navigation to be sticky when the page is scrolled - because if you look at the coding in screen.css, you’ll find that Casper uses z-index values as hight as 9999, which meant that scrolling a page would overlay the sticky menu bar at the top. I’d be happy to help anyone else that might want to make this improvement to the Casper theme.

Hi @pvollmar, I’m sorry I didn’t get any updates about your progress until just now. Looks like you got it all setup! Nice work, and thanks for sharing.

For me, I tended to use the Off-Canvas element to build ‘hamburger’ menus. You simply toggle off the menu option on medium+ screens and toggle on the normal menu, and then vice versa. Here is a working example of this: