Dropdown menu for main nav

Hi everyone,

I need to create drop-down menu for menu items in the main navigation bar. Ghost only offers one secondary nav, but I need to have a drop-down menu on the main nav also. WordPress has something like this https://www.cloudaccess.net/wordpress-tutorials/143-getting-started/1071-tutorial-11-creating-sub-menu-items-drop-down-menu-items-in-wordpress.html, but Ghost doesn’t. I know that it has to do with navigation.hbs. I am a beginner and not an expert in web design. I have searched everywhere but haven’t found any resources to follow. I’d appreciate any help!

Thank you very much in advance!

2 Likes

@True_Chan I understand being a beginner!

I would suggest “learning by example”:

Find a free theme that has the specific feature you want already built-in. Then look at the code to see how it was done. The Liebling theme might be a good starting point for studying drop-down menus, because it has 2 different types which you can see on the demo:

You can also go through the other free themes here, and find some more examples of drop-down menus:

2 Likes

Here’s one for ghost’s default Casper theme, along with a walkthrough on YouTube I found.

2 Likes

Anyone get that version above from akashmdiu to work on something other than Casper theme? I tried on Liebling but it didn’t work, menu tabs just comes up with [has_child] or [submenu] on frontend all on top level.

It would be good to have this work as it allows for multiple tabs with submenus and is still dynamic. All others are a single submenu using Secondary or hard-coded, which defeats the purpose of using a CMS.

Cheers

@electricescape here is another method that might work for you…

Unfortunately that code isn’t working in the Liebling theme. It just comes up with the full [has_child] or [subitem] written into the menu menu name, and no dropdown. I can’t switch back to Casper because that’s broken and doesn’t seem to want to download the latest working version.

Yes so I got Casper working, and the dropdown works. It just doesn’t work in any other theme other than Casper (I tried a few).