Dropdown menu for main nav

Themes
1

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 Tutorial #11: Creating Sub Menu Items (Drop Down Menu Items) in WordPress, 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!

3 Likes
2

@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
3

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

2 Likes
4

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

5

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

6

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.

7

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).

8

Do I just add the includes into the code injection header after I put the two files in the css and js directory??

9

@Killervette Can you please be more specific in your question? What are you trying to do, and what theme are you using?

Also, have you tried the solution linked here below?

10

No worries, I have moved on and no longer need it. Thanks for the reply.

1 Like
11

Hi!

I’m stuck on this and would like to re-open this thread.

The goal here is that I want to be able to use Ghost’s “EDITION” theme and set up the primary navigation bar to display elements from my secondary navigation bar. In other words, when a visitor interacts with the navigation bar, I want them to be able to hover and/or click the Primary NavBar icon and view a sub-navigation bar relating to whatever header that is. (Example, imagine an automotive blog that has a primary navbar with Mercedes, BMW, and Audi and if a user clicks/hovers over Mercedes, you see a secondary menu with A-Class, C-Class, S-Class, etc.). Currently, the feature with Secondary NavBar only shows the secondary bar at the footer of the site. I should add that I would like to have both a footer nav bar and the feature mentioned above.

Anyone have a solution, preferably while using the same theme?

12

Would love to know if anyone got this working with Liebling! Following the instructions from the link below produced the same results of [has child] in the main menu name and no dropdown.

14

Hi! Did you post on the wrong thread, maybe?

And welcome to ghost! If you’re looking for help, please start a new topic with more details!