Hover-Down Submenus for Casper Here

[denvergeeks]

@scenepensacola

I’m not aware of the Solo them having default dropdown code. Is there actually one built in that you know of?

Yes, here you can see the built-in dropdown on your site… (which appears to be the same, or very similar to, the dropdown built into the Casper theme)…

[denvergeeks]

@scenepensacola

On my site, it’s a gray background for the homepage, and a black background for all sub-pages. Would love to make the one on the homepage also black. Is there an easy way to do that?

@media (max-width: 991px) {
    .is-head-open.is-head-transparent #gh-head, .is-head-open:is(.is-head-transparent,.is-head-brand) 
    #gh-head .gh-head-actions {
        background-color: #000000;
    }
}

[scenepensacola]

@denvergeeks

<script>
    
(function () {
    const mediaQuery = window.matchMedia('(max-width: 767px)');
    
    // IMPORTANT: For themes other than Casper, change the selector just below to select your theme's header menu selector
    const menu = document.querySelector('.gh-head-menu');
    const nav = menu.querySelector('.nav');
    if (!nav) return;

    // IMPORTANT: For themes other than Casper, change the selector just below to select your theme's header logo selector
    const logo = document.querySelector('.gh-head-logo');
    const navHTML = nav.innerHTML;

    if (mediaQuery.matches) {
        const items = nav.querySelectorAll('li');
        items.forEach(function (item, index) {
            item.style.transitionDelay = 0.03 * (index + 1) + 's';
        });
    }
    
    const makeHoverdown = function () {
        if (mediaQuery.matches) return;

        var dropDown_list = [],
        latest_navigation_item,
        // IMPORTANT: For themes other than Casper, change the selector just below to select your theme's header menu item selector 
        nav_list = document.querySelectorAll('.gh-head-menu li');
        var newMenuList = [];
        var menuTree = {};

        nav_list.forEach( (item, index) => {
            if(item.childNodes[0].innerText.startsWith('-')) {
                if(menuTree[newMenuList.length - 1]) {
            menuTree[newMenuList.length - 1].push(item);
                } else {
            menuTree[newMenuList.length - 1] = [item];
            }
        } else {
        newMenuList.push(item);
        }
        });
        
        nav_list = newMenuList.map((item, index) => {
        if(menuTree[index]) {
            let dropdown = document.createElement('ul');
            dropdown.className = 'isDropDown';
            menuTree[index].forEach(child => {
                dropDown_item_text = child.childNodes[0].innerText;
                child.childNodes[0].innerText = dropDown_item_text.replace('- ', '');
                dropdown.appendChild(child);
            });
        item.className += '--hasDropDown';
        item.appendChild(dropdown);
        }
        return item;
        });
    }

    imagesLoaded(logo, function () {
        makeHoverdown();
    });

    window.addEventListener('resize', function () {
        setTimeout(function () {
            nav.innerHTML = navHTML;
            makeHoverdown();
        }, 1);
    });

})();
</script>

Thank you! The code to change the burger background color worked perfectly.

I also implemented your dropdown code you modified for the Solo theme, and I noticed for every dropdown item I add, I lose one or more visible navbar items, even though the width of the navbar should be the same. See screenshot:

[denvergeeks]

@scenepensacola does the same problem exist if you use the Casper theme on your site?

I suspect that the dropdowns built into both Casper and Solo are calculating their positioning in the javascript to fill up the available horizontal space.

Since this Hover-Down Submenu doesn’t calculate, but just lets you manually position the subitems, they’re just not going to play perfectly together.

Maybe there is a way to disable the built-in/click-down menu in those themes.

[danupoyner]

Hi @denvergeeks - love your code here and what you’re doing to help the community!

I am using the Ali Abdaal theme which includes a script for hover down subnav, but unfortunately the script doesn’t work on mobile and the subnav items simply don’t appear. I’ve contacted the dev about it but there’s no response - the same issue exists in the demo site for the theme too.

I tried using your code as a replacement option and doing some tweaks on the selectors but I suspect there’s simply too much difference between Casper and the Ali Abdaal Theme for it to work easily.

Would you be willing to help me troubleshoot either the original script or your code?

The live site is at https://grokk.ist/ - you will see that ‘Reimagine Education’ has a dropdown on desktop but not mobile.

This is the original script included with the theme if it helps

let navItems = document.querySelectorAll('.nav li')
var prevItem
var subItems = [];
for (var i = 0; i < navItems.length; i++) {
  let item = navItems[i]
  let label = item.children[0].innerHTML
  if (label.indexOf('--') == 0) {
    subItems.push({
      link: item.innerHTML,
      classes: item.classList
    })
  } else {
    if (subItems.length > 0) {
      // Append list to previous item
      let subNavHTML = '<span class="nav-trigger">▼</span><ul class="nav">'
      for (var j = 0; j < subItems.length; j++) {
        subNavHTML += '<li class="' + subItems[j].classes + '">' + subItems[j].link.replace('-- ', '') + '</li>'
        document.querySelector('.nav .' + subItems[j].classes[0]).remove() // delete original link
      }
      subNavHTML += '</ul>'
      prevItem.innerHTML += subNavHTML
      prevItem.classList.remove('nav-current')
      prevItem.classList.add('subnav')
      prevItem.classList.add('nav-wrapper')
      // prevItem.firstChild.addEventListener('click', function(e) {
      //   e.preventDefault()
      // })

    }
    // Reset
    prevItem = item
    subItems = []
  }
}
</script>

Any advice appreciated - thanks!

[denvergeeks]

@danupoyner – Thank you for your kind words

I might be able to help. Both of your approaches seem workable.

How do you envision the dropdown to behave on mobile? (i.e. do the subitems simply appear in a list under the main item, or, if it has a caret/triangle next to it, then when you tap that item do the subitems slide out horizontally, in a boxed container, or what/how?)

[danupoyner]

Thanks for the quick response and your willingness to help - it’s much appreciated.

I guess the behaviour I’m looking for ideally is what is on the actual Ali Abdaal website (https://aliabdaal.com/) where on mobile the whole nav is in a panel and tapping the arrow slides everything out underneath vertically. Or indeed how it works in your version of the code.

Hope this helps

Cheers,
Danu

[denvergeeks]

I noticed that aliabdaal.com is now running on Wordpress…

Let’s do this… go ahead and implement this Hover-Down Submenu as best you can, and then I’ll take a look and see where we are, OK?

[danupoyner]

Ok, I have made some progress!

First I figured out the reason your script wasn’t working with my theme in the first place was that the imagesLoaded library wasn’t included! So fixed that.

Then I managed to map the elements and selectors ok, so it now works ok on desktop. The formatting needs a little fine-tuning but that’s ok.

I’ve adapted the elements for the mobile CSS as best as I can, but the script isn’t adding the ‘.isHoverDown’ class when in mobile view. So now I’m stuck!

You can see everything live at https://grokk.ist/

Many thanks again for taking a look.

[denvergeeks]

@danupoyner - In my browser tools (Chrome) I’m seeing a change at the width between 766px wide and 767px wide…

766px Width

767px Width (Not Hovered)

767px Width (Hovered)

Does that help provide clues?

[Ghost-Beginner]

Hi @denvergeeks , thank you for the guide!
I have a problem with this, my test Ghost website (https://ym-test.ghost.io/) shows only 3 nav items, how can I make it to show all nav items?

Hope to looks like this

[denvergeeks]

@Ghost-Beginner please post a screenshot of your Navigation settings in the Admin

Also, you can try adding this into your header injection CSS in between the <style></style> tags…

.gh-head-menu .nav-more-toggle {display: none}

Please let me know if that works for you.

[CalvinIsBack]

@denvergeeks

.gh-head-menu .nav-more-toggle {display: none}

Hello! New to this I am already very grateful for your posts! For a beginner with Ghost (and coding in general) I find them very useful. I am encountering an issue with the Solo theme. I used the code you suggested for it, and this is what happens, New Zealand should be under Destinations

I f I add the line .gh-head-menu .nav-more-toggle {display: none} to make the bar larger, then New Zealand appears underneath Destinations but there are no more tabs for the menu.
Would you know how to fix this? Thank you in advance!

[denvergeeks]

@CalvinIsBack did you study this post?

Adding a Dropdown Menu in the Solo Theme

Hi All, Can anybody please help me in adding a dropdown menu in the newly launched theme “Solo”?

Please post your request over under that Topic, and provide a link to a live example of the problem!

Please includethe code you have in your Header and Footer Injections as well as a screenshot of your Navigation settings in the Admin!

[Ghost-Beginner]

@denvergeeks Here’s my Navigation setting:

I added

.gh-head-menu .nav-more-toggle {display: none}

into the header injection but I can only see the first three dropdown menu items.
And also found I can see all nav items when I check the website in iPad window view, guess this issue is something related to the window size? (I use 13-inch laptop & wide screen sometimes)

[Ghost-Beginner]

@denvergeeks This is the preview if someone use iPad Pro to check the website

[denvergeeks]

@Ghost-Beginner try this… (and let me know if it works as you want)

@media (min-width: 992px) {
    .is-head-left-logo .gh-head-menu {
    margin-right: 0;
    }
}

[Ghost-Beginner]

@denvergeeks Thank you for the reply! But it is not working for me I think I did not put the wrong codes into my code injection setting:

<!-- Dropdown menu setting- Start -->
<style>

li[class*="nav-"][class*="--hasDropDown"] {
	position: fix;
}
li[class*="nav-"][class*="--hasDropDown"] a:after {
	content: "▼";
	padding-left: 5px;
	font-size: 12px;
	color: inherit;
}
li[class*="nav-"][class*="--hasDropDown"] .isDropDown a:after {
	display:none;
}
li[class*="nav-"][class*="--hasDropDown"]:focus-within > li[class*="nav-"]:after,
li[class*="nav-"][class*="--hasDropDown"]:hover > li[class*="nav-"]:after {
	background-color: transparent;
}
li[class*="nav-"][class*="--hasDropDown"]:focus-within .isDropDown,
li[class*="nav-"][class*="--hasDropDown"]:hover .isDropDown {
	opacity: 1;
	visibility: visible;
}
.isDropDown {
	z-index: 1;
	opacity: 0;
	visibility: hidden;
	position: absolute;
	margin: 0;
	min-width: 150px;
   /* border-radius: 6px;*/
	list-style: none;
	/* The padding inside the drop down (the space surrounding the links) */
	padding: 10px;
	/* The rounded corners of the drop down */
	border-radius: 6px;
	/* The background color of the drop down */
	background: #333;
	/* The color of the links in the drop down */
	color: inherit;
}
.isDropDown li[class*="nav-"] {
	margin-right: 0 !important;
}
.isDropDown li[class*="nav-"]:not(:last-child) {
	margin-bottom: 0;
    /* Dividers between the dropdown items */
    /*border-bottom: 1px solid #ddd;*/
}
  /*  .gh-head-menu .nav-more-toggle {display: none}*/
@media (min-width: 991px) {
    .is-head-left-logo .gh-head-menu {
    margin-right: 0;
    }
}
/* OPTIONAL: in mobile, left align all menu items and indent submenu items */

    @media (max-width: 991px) {
    #gh-head .gh-head-inner {
        grid-template-columns: 1fr;
    	height: auto;
	}
	.gh-head-open #gh-head .gh-head-menu,
    #gh-head .gh-head-menu .nav {
    	align-items: flex-start;
    	display: flex;
    	flex-direction: column;
        margin: 0 auto;
	}
    .gh-head-menu .nav li {
        text-align: left;
	}
    .gh-head-menu .nav li.hasDropDown {
        margin: 0;
    	padding: 0;
    	display: flex;
    	flex-direction: column;
    	align-items: flex-start;
	}
    .gh-head-menu ul.isDropDown {
    	list-style: none;
    	text-align: left;
    	margin: 0;
    	padding: 0 0 0 10px;
	}
    .gh-head-menu ul.isDropDown li {
    	margin: 0;
    	padding: 0;
    	text-align: left;
	}
    .gh-head-menu ul.isDropDown li a {
    	font-size: 2rem;
    	line-height: 1.5;
	}
}
    
</style>
<!-- Dropdown menu setting- End -->

[CalvinIsBack]

I did, but then got derailed because it was not working. I’ll go through it again and come back in the proper channel. Cheers!

[ROY]

This did not work for me either

@denvergeeks @Cathy_Sarisky is there an update for this? I’m using Casper theme too.

Any suggestion would be greatly appreciated!