Dropdown menu that works for all official free Ghost themes

Themes
1

Just copy and paste the code below, you can have a dropdown menu!
dropdown-menu

I have tested this method with all official free Ghost themes, it works on desktop and phone screens :yum: :yum: :yum:

:point_right: For timely updates and more customized solutions, feel free to check out my article.

  1. Add Code to ā€˜Site headerā€™
    (Settingsā€“>Advancedā€“>Code injection)
<!-- Dropdown Menu -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rakihub/ghost-code-injection@main/nested-menu/built/nested-menu.min.css">
  1. Add Code to ā€˜Site footerā€™
    (Settingsā€“>Advancedā€“>Code injection)
<!-- Dropdown Menu -->
<script src="https://cdn.jsdelivr.net/gh/rakihub/ghost-code-injection@main/nested-menu/built/nested-menu.min.js"></script>
  1. Add A Dropdown Menu in ā€˜Navigationā€™
    dropdown-menu-1
    dropdown-menu-11896Ɨ466 59.2 KB
2 Likes
2

Iā€™ve emailed you directly, but just in case anyone else has same problem, when I click a nav link or refresh page, the [has-child] & [child] page code show briefly before the site resorts to showing the dropdown menu. Why would this be? Thanks.

3

Thank you for your feedback. I have fixed it and put the new version in my blog :point_down:, please remove the previously copied code(include code in ā€œsite headerā€ and ā€œsite footerā€) and follow the new instructions.

1 Like
4

Brilliant. Thank you for the prompt fix. Thatā€™s much better. Appreciate your help. :sunglasses:

5

Oh no it just wiped out my secondary footer in itā€™s entirety.

Please look at.

Thanks again.

6

Have updated the above blog again, please remove the previously copied code and use the new one.

1 Like
7

Thatā€™s better. Thank you so much. Looks great. Second nav intact again. :+1: