No dropdown menu option

I’m looking to add a basic dropdown menu to our navigation menu. Like many Ghost users, I don’t code much and I don’t have time to work out the custom code to add a dropdown menu.

It is such a basic thing, so I am wondering why Ghost hasn’t added the simple ability to add pages to show when you hover over an item in the nav menu. Ghost is wonderful in many ways but sorting out basics like this would encourage many non-technical WordPress users to switch.

Does Ghost have any plans to add this functionality in the near future?

1 Like

I hope so. The lack of extendable menu structure is a major limitation.

Does this address your need? Add Dropdowns to Main Menu Through the Site Admin (Copy & Paste into Site Header/Footer Injections)

2 Likes

Hi Cathy, thanks for the link, and sorry for the delay in replying, I only just had time to test the solution proposed by the developer in that thread. Unfortunately it does not work at all with our theme.

@John are you planning on adding dropdown functionality to nav menus in the near future? It seems odd that Ghost doesn’t have this feature given the high benefits vs relatively low complexity. It would be make Ghost a viable alternative to WordPress for the millions of website owners who have limited coding skills. A proper dropdown menu is needed for any website with lots of sections, and is important to structure sites for SEO.

Nope, no plans - if you have a feature request you can post it in the #ideas category, and others can vote on it if it’s important to them too

Which theme are you using?

Hi Cathy, we’re using Hue by Aspire Themes: Hue - Ghost theme for podcasting | Aspire Themes

And our blog is at www.languatalk.com/blog

Seems like an oversight to me not to add basic functionality like this but I guess if it hasn’t been posted in the ideas category of the forum, I may be wrong. I’ll add it there.

1 Like

That’s interesting. I’d expect the code injection and navigation options changes from the link above would work, because inspecting your site, it uses <ul><li> for menu items, similar to themes that this solution does work with, so I’d expect it to at least sort of work out of the box. Two thoughts:

  • Are you loading jQuery? That’s a requirement, and I don’t know if your theme includes it or not. You’d add it like this:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    (I have mine at the very top of the code injection header, but it’s possible that later would work - haven’t tested.)

  • When you say doesn’t work at all, what happens? A screenshot would be helpful for understanding the problem. In your navigation page, you need to have the top element labeled [has_child] and the submenu items labeled as [subitem]. The subitem items should NOT appear on the nav menu, but should appear when you hover on the parent item. If the submenu items are appearing (and everything includes [subitem] or [has_child], that suggests that the script isn’t recognizing the items). If the submenu items disappear but you get a white (or black) box on hover, that’s probably just a styling problem.

I’m not the script creator, but post more about the problem and I’ll try to help!

You might also want to open developer mode (F12) and copy any console errors.

Hi Cathy,

Very kind of you to help me on this!

So, I applied the code exactly as instructed in the thread.

This is what happened, the new items were just added to the first level of the menu with [has_child] showing.

This morning, I tried adding the extra jquery script you mentioned. Now it works. Thanks!

I then wanted to tweak the CSS to hide the arrow next to the dropdown. I found that when I hit ‘save’ on the code injection page, the nav menu would revert to a previous setup. After wasting half an hour playing around with it, I found the bug thread you created, highlighting that if you update the CSS when the nav menu is open, it will revert the nav menu back to a previous state. Thanks for highlighting this to Ghost.

I find it odd that Kevin describes it as an expected behaviour that Ghost didn’t feel the need to fix, given it makes no sense from a user perspective and could easily lead to the website menu being messed up without the creator noticing.

I’m glad you’ve got it (almost) working!

Your experience with trying to edit in two places exactly parallels mine, except there was more confused swearing in my version. ;) A good reminder for all of us that what makes sense to developers doesn’t always make sense to users.

I think if you remove this bit of code, it’ll be gone:

       $(`.${hasChildrenClasses}`).append(hasChildrenIcon);

Alternately, if you want it to look different, look for where hasChildrenIcon gets set earlier in the code.

Haha! I couldn’t shout any expletives as my girlfriend was on a client call next to me. And thanks for the suggestion for removing the arrows, it worked! Display none wasn’t working for me. I also had to tweak the CSS a bit to get the spacing right on different devices.

Thanks again Cathy, your help is much appreciated. If you ever think you’ll be interested in coding part-time with a startup, feel free to message me. We’re not hiring right now but that might change in future.

If I were a paying Ghost user, I’d be complaining about my menu being overwritten by that bug. But we currently use Ghost for free, and I recognise the amazing work their team has put into building the software.

1 Like