Add Dropdowns to Main Menu Through the Site Admin (Copy & Paste into Site Header/Footer Injections)

If you need just a very basic drop down that works in Casper there’s also this one…

I can’t get it to work with Casper theme, could you help me?
I added all on Site footer of Ghost:

<script src='https://xxxxxxxx.com/assets/css/ghost-dropdwon.css'></script>
<script src='https://xxxxxxxx.com/assets/js/ghost-dropdown.js'></script>

     $(document).ready(function () {
        ghost_dropdown({
            targetElement: "nav.ul li",
            hasChildrenClasses: "menu-item-has-children",
            hasChildrenIcon:  "<svg width='19' height='10' viewBox='0 0 19 10' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1.74805 1.52002L9.54883 9.00002L17.3496 1.52002' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>",
            hasChildDetectText: "[has_child]",
            submenuUlClasses: "ghost-submenu",
            subitemDetectText: "[subitem]",
            subitemLiClasses: "subitem",
            multi_level: false,
            mega_menu: false
        });
    });

And the result is…

@Joan you have an error in your CSS include:

That one needs style tags…

<style> ..etc... </style>

The same @denvergeeks … Seems Ghost not detect the .JS script or it’s wrong, beacuse the menu shows the elements with [has_child] and [subitem].

The instructions of @themeix is wrong too i think…

Any idea on how to make this work with Headline?

Dropdown primary nav menu in Headline

Great, but it didn’t work on my phone! but it worked perfectly on desktop!

@saiunes What did not work?

Also, did you try this one…

1 Like

Hi, I am trying to use the script in an Edition theme but the image looks like below. Which part of the javascript takes out the [has_child] and [subitem] bits out of the menu items?
image

is jQuery getting loaded, @Tada_Hozumi ? What shows up in the console logs? (F12 to open developer tools, then click the ‘console’ tab.)

Hi, I get this
image

and my script that i copy/pasted looks like this:

I’d guess that jquery isn’t loaded by this theme. Try adding a line to load it before this script.

i’m sorry to be such a neophytye … is it possible for you to share how that’s done?

Paste this into your Site Footer Code injection:

<script src="https://code.jquery.com/jquery-3.6.3.min.js"></script>

If that doesn’t work, paste it instead into your Site Header Code Injection…

Please do report back here your results…

Hi! It loads now, but I get a moment of it showing the links as X [has_child] X [subitem] before it shows the dropdown … is there a fix to this loading issue?

The problem is that the code runs late in the page load. Including it in the .hbs file (and avoiding jQuery) helps a LOT but then it’s no longer a code injection solution.

I see. Actually, I posted it to the main site from my test and it stopped working at all… hmmph.

I’m curious if you have an opinion

Please nvm if that is too much fuss.

@Tada_Hozumi You could try this one which loads smoothly and without that flash

ah thank you, gonna try that out