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

Thanks for all mate!!! :slight_smile:

Thank you for sharing the code to creating this dropdown feature!

I tried it out in the dawn theme and it works, but the pages in the dropdown menu are not aligned properly. Do you have any solution to fix this?

Thanks in advance!

Screen Shot 2022-08-12 at 11.08.45 AM

@Maaike_Schilperoort – if what you want is for all of the 3 items inside the drop-down to be aligned to the left, you can add this to the end of the CSS snippet above…

ul.ghost-submenu li {
    margin-left: 0 !important;
}
2 Likes

That works, thank you!!

2 Likes

Is there a way to add multiple dropdowns to the main menu? I am aware of the secondary navigation options that you can change in Settings and am using the Liebling theme, so I have one dropdown with those links but would prefer a dropdown for every top-level menu item.

@adam have you tried adding multiple drop downs using the code provided here?

Here is a post with a YouTube Video showing it working for multiple dropdowns:

Where do you add the [has_child]?

In the Admin Dashboard → Settings → Navigation… so for example:

… generates this drop-down menu under my Engage Primary link …

1 Like

I added the [has-child] and [subitem] to the Nav list of pages, but all that does is add those tags to the navigation. For example, Our Story is the parent and Our Team is supposed to be its child, but instead I get this:

Is there somewhere else I need to add those tags?

@PerseidsGirl are you using Casper?

What is the URL of your site?

Is the menu item with [subitem] directly underneath the menu item with [has_child] in your Primary Navigation settings? It needs to be.

Also, [has-child] will not work… it needs to be an underscore, not a dash in between has and child…

Please post your header and footer injections…

Thank you for your assistance @denvergeeks
This is my site so far: https://moodfuel-news.ghost.io/
It’s the Daily News theme from @GBJsolution
I’ll correct the dashes to underscores.

Header

/* For Dropdown Menus */ li.menu-item-has-children { position: relative; padding-right: 25px!important; display: inline; } li.menu-item-has-children:hover ul.ghost-submenu { visibility: visible!important; opacity: 1!important; top: 50px!important; } .menu-item-has-children svg { position: absolute; right: 0px; top: 60%; transform: translate(-0%, -50%) scale(1.1); } ul.ghost-submenu li { list-style: none; white-space: nowrap; } ul.ghost-submenu { border-radius: 5px; position: absolute; visibility: hidden; z-index: 1; opacity: 0; top: 30px; transition: 0.3s; box-shadow: 0 1px 5px 0 rgb(0 0 0 / 14%); max-width: unset !important; /* Edit below to adjust Dropdown Menu positioning and color */ left: 0; margin-top: -15px; padding: 5px 20px 10px 10px; background: #fff; color: #000; }

Footer:

@PerseidsGirl as mentioned above…

Since you are using the Daily News theme you will need to adapt the CSS and/or selectors to make it look and behave correctly on your site :nerd_face:

Looking at your site right now, I can see that the dropdown is now appearing since (I assume) you moved the menu item with [subitem] to directly underneath the menu item with [has_child] and correct the dashes to underscores.

Now, to make the link appear, add something in your CSS like…

ul.ghost-submenu {
    background: #000;
}

or…

ul.ghost-submenu li a {
    color: #000;
} 

… and adjust your padding to something like this…

ul.ghost-submenu {
    padding: 15px 20px 10px 20px;
}
    
1 Like

This is great, but it only lets me select the top item in the dropdown list? site: thedansmock.com

@thedansmock - the dropdown on your site is not using the code presented in this Topic. Rather, it appears to be generated by a tooltip. Also, the theme you are using appears to be Liebling, not Casper.

Hey @denvergeeks,

I fortuitously came across this just yesterday thanks to @Cathy_Sarisky’s mention of it (thanks!) at the very moment that I needed it (I must have skipped over it when you first posted it as not applicable to me). And wow, talk about fantastic! I wouldn’t have imagined one could do this with the in-built navigation, but I guess if you know JS you can do “anything” you want.

Anyhow, although I’d hard-code submenus into my personal theme if needed and adjust from there, I’m currently putting together a site and theme for a colleague who I’d prefer to be able to edit these submenus himself via the admin. But not only am I setting things up with Edition rather than Casper, but I’ve also created custom nav menus with custom classes. Suffice to say, the dropdown script doesn’t work at all and the subitems appear as regular (parent) menu items in the nav.

I tried looking through the JS (which I don’t know in the slightest) and couldn’t decipher what I needed to change. Any chance you could let me know which selectors I need to customise?

Thanks again for this!

@Stromfeldt , do you have jQuery loading? This solution uses jQuery, but it doesn’t seem to load in my theme. (I loaded up Edition, pasted in the code injection above, and then checked my console log to see the problem.)

Ah, great question. I tend to go overboard with JS and thus jQuery on my other themes, and just assumed it was included – which it wasn’t. Thanks!

Regardless, inserting jQuery just before the mentioned JS resulted in nothing else besides re-aligning things a bit (strangely enough).

EDIT: No, wait, I see something appearing on mobile (but not desktop)! Let me play around…

So for some reason the nav on my desktop view disappears when adding the jQuery, but when I shrink down the browser to mobile width I can see the nav. I’ll have to look into that.

Otherwise, it seems that the script is activated and doing something, but I probably have the selectors incorrect as the script isn’t assigning the subitems to the parents.

This is what happens when I hover over the parent item:

I got it working on my demo site (yes, with Edition).

I did get it working, although styling wasn’t perfect. Here’s what I had. YMMV depending on whether your menu is transparent and desired colors. (Prior to changes I had white on white - ugh!)

ul.ghost-submenu li {
    list-style: none;
    white-space: nowrap;
    margin-left: 0px !important;
}

ul.ghost-submenu {
    border-radius: 5px;
    position: absolute;
    visibility: hidden;
    z-index: 1;
    opacity: 0;
    top: 30px;
    transition: 0.3s;
    box-shadow: 0 1px 5px 0 rgb(0 0 0 / 14%);
    max-width: unset !important;
    
    /* Edit below to adjust Dropdown Menu positioning and color */
    left: 0;
    margin-top: -15px;
    padding: 5px 20px 10px 10px;
    background: #000;
    color: #fff;
}

I’m not seeing what you’re seeing with dropdown menus (unless I have too many other items and it goes into the …, in which case things get weird).
Not hovered:


Hovered:

I didn’t change any selectors, but there’s a lot going on with the nav in this theme (the …, the transparent or not setting), so YMMV!

1 Like