I found this post providing code to add, but it doesn’t work for the Headline theme. I’m a bit of a noob. Anyone have suggested changes to make for this specific theme to make it work?
@journaluser here is the code that works for the Headline theme:
Header Code Injection…
<style>
li[class*="nav-"][class*="--hasDropDown"] {
position: relative;
}
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;
max-width: unset;
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: #000;
/* The color of the links in the drop down */
color: #fff;
}
.isDropDown a {
color: #fff;
}
.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;
}
</style>
Footer Code Injection…
<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>
For any others reading this, to create the links in the dropdown - you simply add a hyphen (-) and then a space before the Navigation label… like so…
Here’s how the Dropdown appears on the Headline theme (created with the code and instructions in this post)…
3 Likes
Thank you so much! That mostly did the trick.
Works great on desktop. But on mobile, there’s no dropdown. It shows the list of menu items, with hyphens. Any ideas on how to make this work on mobile?
I have the same issue. Wondering if you’ve figured this out?
Unfortunately not yet. Hoping someone in this forum can help.
I used the code. Thank you for that! I was able to make some of the adaptations that I want, but I can’t figure out why some of my menu items are pushed to a “…” section at the end of my menu. I think I need to expand the number of items allowed in the menu, but have not figured out how to code that. Thanks.
That’s hard-coded into headline theme (I forked because of that).
You can try a different approach to organize your menu trying to keep it at minimal and that will keep you away from those unusual dots 
Whenever I add this code into the Header and Footer in my Headline theme, it only displays the first submenu item, and the rest it displays as part of regular menu with hyphens… any suggestions
Can somebody tell me how to add this to the liebling theme? I’d love for this to work for that awesome theme. I have played around with the class names surrounding the nav, but nothing seems to work.
@AnnaMariaEriksson have you tried the other one?
I just posted a working version of that one for Liebling Theme…
1 Like
Yes, just tried. Works great. Thanks!
Please continue to post about Liebling Theme Dropdown, over on that Topic →
You’re a great help!
I want to ask two questions:
When I open the navigation menu with my Iphone, there is no dropdown options, it just displays everything, is there anything I can do about this?
Only the first 3 subitems are showing up, the rest is not being added, how to address this?
You can copy and paste the code in this article to your Ghost blog to create dropdown menu.
I have tested it across dozens of Ghost themes, and it works on desktop and phone screens!
Simple and useful 
Would you be able to provide a little more detail on how to achieve this? I had my menu and drop downs working perfectly, then a colleague installed a new template. When I reverted back I had the “…”. Thanks
You want to search ‘768px’ on .js files and change it to ‘992px’.
I think that was possible to fork this easily but common themes files was integrated to core.