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

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

You’re correct. I tried substituting vanilla Edition for my customised Edition, as well as removed all of my custom CSS in code injection, and the dropdown nav fully works on both desktop and mobile.

Even without this issue I’ve admittedly kind of butchered Edition, which actually fully works except for this. Time to work backwards and see if I can isolate the issue.

Thanks very much for clearing this up for me!

1 Like

I’m happy to help anywhere I can. I’ll need links to live installs where I can tinker in the code inspector!

2 Likes

Thanks very much for the offer but… I got it!

I’d placed the <ul><li></li></ul> structure of the nav inside another <ul><li></li></ul> structure, which I kinda knew was asking for trouble when I did it even though it seemed to work fine at the time. But when I later discovered your dropdown menu script and then applied it I’d forgotten that I’d included that sloppy code – which obviously was gonna cause conflicts.

Anyway, I’m re-coding things now in a more proper manner.

Thanks to both of you @denvergeeks and @Cathy_Sarisky! (If you’d like I’ll DM you with the site’s link once it’s live if you want to see the script in the wild.)

Of course! I’d love to see what you’ve done!

1 Like

Hello @themeix, I somehow missed out on the fact that the script is originally yours. Thanks for this, very interesting approach! I’ve got a bit of a bug though, so thought I might throw it by you.

I’ve got everything working fine, except that when the home page is initially loaded, and when one navigates to any other page/post (or simply reloads the site), the submenus flash below / next to the nav momentarily. And it’s not just my implementation of the script – if you look at any of the other attempts above they all do the same thing, albeit to different degrees (see here and here). My implementation is even worse, possibly because there’s many more subitems (I can DM you with a link and password if you’re interested).

I took a look at your Learn theme, which appears to use the same script, and which doesn’t flash. I also saw on the script’s repo mentioned above that the most recent commit (from over a year ago) is one that includes “fix menu flash issue”, but which doesn’t seem to fix this flash issue. I decided to try and copy and paste the related JS from Learn and replace the JS mentioned in your repo with it, but that just made the whole thing inoperable (it’s possible I copied/pasted incorrectly, but I don’t think so).

Is there any chance that you’ve made a further fix to the script that you’d be willing to share?

Thanks again for this!

2 Likes

Also, I made a few adjustments to the CSS and how to set up the links on the dashboard’s navigation page.

First off, if you don’t want a click on a parent item to result in a redirect to the homepage, substitute http://localhost:2368/#! or https://yourdomain.com/#! with simply #.

Secondly, if you don’t want the cursor to appear as a pointer when hovering over the parent but do when it hovers over the children, add in this:

.menu-item-has-children a:hover {
    cursor: default;
}
.menu-item-has-children ul li a:hover {
    cursor: pointer;
}
2 Likes