This is the most rudimentary of drop downs, just copy-and-paste code into your Site’s Header and Footer Code Injections in the Admin area of your Ghost site, and add a dash and a space to a Primary Navigation Menu Item to make that item appear in a drop down menu below the Menu Item above it.
So this can be installed and configured on hosted sites or in other circumstances where you only have Admin access.
Credit goes to @ahmadajmi at Aspire Themes where I got the idea and the inspiration for the code.
If you want or need a more robust menu system that can also be copy-and-pasted in the Admin, @themeix has kindly provided a full mega-menu system that can also be used for simple drop downs as well:
This is the view from my Desktop…
And this is the view on my iPhone 13 Pro…
OK SO – HERE GOES THE “HOW-TO”…
This is how we use Ghost’s built-in Primary Navigation settings to set up the links we want in the dropdowns…
HERE IS THE CODE TO PASTE INTO THE SITE HEADER CODE INJECTION…
<style>
@media (max-width: 991px) {
.has-cover.gh-head {
display: flex;
align-items: center;
flex-direction: column;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100vh;
padding-top: 72px;
background-color: var(--background-secondary);
opacity: 0;
visibility: hidden;
transform: scale(0.96);
}
.has-cover.gh-head-open {
opacity: 1;
visibility: visible;
transform: scale(1);
transition: all half(var(--motion-duration)) cubic-bezier(0.694, 0, 0.335, 1);
}
}
@media (min-width: 991.1px) {
.has-cover.gh-head {
display: block;
flex: 2;
display: flex;
align-items: center;
justify-content: flex-end;
}
}
@media (max-width: 991px) {
.has-cover.gh-head-menu {
width: 100%;
padding-left: 32px;
padding-right: 32px;
}
}
@media (min-width: 991.1px) {
.has-cover.gh-head-menu {
display: flex;
align-items: center;
justify-content: flex-end;
}
}
@media (min-width: 991.1px) {
li[class*="nav-"]:not(:last-child) {
margin-right: 24px;
}
}
@media (max-width: 991px) {
li[class*="nav-"] {
margin-bottom: 16px;
}
}
@media (min-width: 991.1px) {
li[class*="nav-"][class*="--hasDropDown"] {
position: relative;
}
li[class*="nav-"][class*="--hasDropDown"] a:after {
all: unset;
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;
}
}
@media (min-width: 991.1px) {
.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: inherit;
}
.isDropDown li[class*="nav-"] {
margin-right: 0 !important;
}
.isDropDown li[class*="nav-"]:not(:last-child) {
margin-bottom: 0;
}
}
li[class*="nav-"] a {
display: flex;
align-items: center;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
font-size: 16px;
line-height: 1.5;
font-weight: inherit;
white-space: nowrap;
}
@media (max-width: 991px) {
li[class*="nav-"] a {
font-size: 2.5rem;
line-height: 1.5;
}
}
@media (min-width: 991.1px) {
li[class*="nav-"] a {
position: relative;
}
li[class*="nav-"] a:after {
content: "";
display: block;
width: 100%;
height: 2px;
position: absolute;
bottom: -2px;
background-color: transparent;
}
}
/* Underline or other style for the link of the Current Page you are on */
li[class*="nav-"].nav-current a:after {
background-color: transparent;
}
/* Underline or other style for the Home link when you are on the Home page */
.home-template li[class*="nav-"].nav-current a:after {
background-color: transparent;
}
/* Underline or other style for the links in certain states */
li[class*="nav-"] a:active:after,
li[class*="nav-"] a:focus:after,
li[class*="nav-"] a:hover:after {
background-color: transparent;
}
@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:before {
all: unset;
content: " - ";
}
.gh-head-menu ul.isDropDown li a {
font-size: 2rem;
line-height: 1.5;
}
}
</style>
AND HERE IS THE CODE TO PASTE INTO THE SITE FOOTER CODE INJECTION…
<script>
var dropDown_list = [],
latest_navigation_item,
// IMPORTANT: For themes other than Casper, change the selector just below to select your themes Primary Navigation links
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;
});
</script>
(Solo Theme)
