Problems with pop-up navigation in the modified Edition Theme

MrWho97 · March 14, 2026, 8:45am

Hello everyone,

I have a problem navigating my Ghost installation. I use the Edition Theme, but have modified it slightly. My goal is for the navigation to be able to pop up sub-points as a dropdown, but currently that doesn’t work.

I’m not sure if it’s because of my changes or if I did something wrong in the structure. I’ve checked the default.hbs and header.hbs files and would like to post them here for viewing so someone can see what’s wrong.

Files:
Default.hbs

<!DOCTYPE html>
<html lang="{{@site.locale}}" class="grenze-regular w-screen h-screen overflow-x-hidden">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{meta_title}}</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Grenze:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="{{asset "built/screen.css"}}">

    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/fslightbox/index.js"></script>
    {{ghost_head}}
</head>

<body class="w-full h-full text-base bg-[url('/assets/images/background.jpg')] bg-cover bg-center bg-fixed {{body_class}}{{{block "body_class"}}} is-head-{{#match @custom.navigation_layout "Logo on the left"}}left-logo{{else match @custom.navigation_layout "Logo in the middle"}}middle-logo{{else}}stacked{{/match}}{{#match @custom.title_font "=" "Elegant serif"}} has-serif-title{{/match}}{{#match @custom.body_font "=" "Elegant serif"}} has-serif-body{{/match}}{{^is "home"}}{{#if @site.cover_image}} is-head-brand{{/if}}{{/is}}">
<div class="w-full h-full flex flex-col min-h-full text-base">

    {{> "header"}}
    {{#is "home"}}
        {{> "cover"}}
        {{#if @custom.show_featured_posts}}
            {{> "featured-posts"}}
        {{/if}}
    {{/is}}

    <div class="site-content grow p-6">
        {{{body}}}
    </div>

    <footer class="bg-zinc-900 w-full p-4 {{#unless @site.secondary_navigation}} no-menu{{/unless}} gh-outer text-white">
        <div class="gh-foot-inner mx-auto w-4/6  flex flex-row gap-4 items-center justify-center text-lg">
        <div class="gh-copyright">
                {{@site.title}} © {{date format="YYYY"}}
        </div>
        <div class="footer-visitors">
                Besucher insgesamt: <span id="totalVisitors">0</span>
        </div>
        <div id="socials" class="flex flex-row">
              <!-- Facebook -->
  <a href="https://facebook.com"
     class="flex items-center gap-2 px-4 py-2 rounded-xl hover:bg-gray-800 text-white transition shadow">
     
    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 fill-current" viewBox="0 0 24 24">
      <path d="M22 12.07C22 6.48 17.52 2 11.93 2S2 6.48 2 12.07c0 4.99 3.66 9.13 8.44 9.93v-7.02H7.9v-2.9h2.54V9.41c0-2.5 1.49-3.88 3.78-3.88 1.1 0 2.25.2 2.25.2v2.47h-1.27c-1.25 0-1.64.77-1.64 1.56v1.88h2.79l-.45 2.9h-2.34V22c4.78-.8 8.44-4.94 8.44-9.93z"/>
    </svg>

    Facebook
  </a>

  <!-- Instagram -->
  <a href="https://instagram.com"
     class="flex items-center gap-2 px-4 py-2 rounded-xl hover:bg-gray-800 text-white transition shadow">

    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 fill-current" viewBox="0 0 24 24">
      <path d="M7.75 2h8.5A5.75 5.75 0 0 1 22 7.75v8.5A5.75 5.75 0 0 1 16.25 22h-8.5A5.75 5.75 0 0 1 2 16.25v-8.5A5.75 5.75 0 0 1 7.75 2zm0 2A3.75 3.75 0 0 0 4 7.75v8.5A3.75 3.75 0 0 0 7.75 20h8.5A3.75 3.75 0 0 0 20 16.25v-8.5A3.75 3.75 0 0 0 16.25 4h-8.5z"/>
      <path d="M12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 2.2a2.8 2.8 0 1 0 0 5.6 2.8 2.8 0 0 0 0-5.6z"/>
      <circle cx="17.5" cy="6.5" r="1.2"/>
    </svg>

    Instagram
  </a>

  <!-- Email -->
  <a href="mailto:info@deinedomain.de"
     class="flex items-center gap-2 px-4 py-2 rounded-xl hover:bg-gray-800 text-white transition shadow">

    <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 stroke-current" fill="none" viewBox="0 0 24 24" stroke-width="2">
      <path stroke-linecap="round" stroke-linejoin="round"
        d="M3 8l9 6 9-6M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
    </svg>

    E-Mail
  </a>
        </div> 
        <div class="flex flex-col">
            <div class="font-bold underline">Rechtliches</div>
            <a href="/datenschutz">Datenschutz</a>
            <a href="/impressum">Impressum</a>

        </div>   
            
        </div>
    </footer>

</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('.kg-image-card img, .kg-gallery-image img').forEach((img) => {
        if (img.closest('a')) return;

        const link = document.createElement('a');
        link.href = img.currentSrc || img.src;
        link.setAttribute('data-fslightbox', 'gallery');

        img.parentNode.insertBefore(link, img);
        link.appendChild(img);
    });

    if (typeof refreshFsLightbox === 'function') {
        refreshFsLightbox();
    }
});
</script>

{{!-- Fixes 100vh issue on mobile browsers with toolbar on the bottom --}}
<script>
    if (document.body.classList.contains('with-full-cover') && (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.platform))) {
        document.getElementsByClassName('cover')[0].style.height = window.innerHeight + 'px';
    }
</script>

<script src="{{asset "built/main.min.js"}}"></script>

{{ghost_foot}}

</body>
</html>

Header.hbs (partials/header.hbs)

<div class="sticky top-5 z-50 mx-auto mt-4 w-[95%] max-w-7xl rounded-2xl border border-white/10 bg-zinc-900/70 shadow-xl backdrop-blur-2xl">

<header x-data="{open:false}" class="text-white">

  <!-- TOP BAR -->

  <div class="flex items-center justify-between px-5 py-3 lg:px-6">

    <a href="{{@site.url}}" class="flex shrink-0 items-center font-semibold text-lg text-white">
      {{#if @site.logo}}
        <img src="{{@site.logo}}" alt="{{@site.title}}" class="h-8 w-auto">
      {{else}}
        {{@site.title}}
      {{/if}}
    </a>

<!-- DESKTOP NAV -->
<nav class="hidden lg:block" aria-label="hauptnavigation">
  <ul class="flex gap-6">
    {{#foreach navigation}}
      <li class="relative group">
        <a href="{{url}}" class="px-2 py-1 hover:text-white">{{label}}</a>

        {{#if children}}
          <ul class="absolute left-0 mt-2 w-48 bg-zinc-800 rounded-lg shadow-lg opacity-0 group-hover:opacity-100 pointer-events-none group-hover:pointer-events-auto transition-opacity">
            {{#foreach children}}
              <li>
                <a href="{{url}}" class="block px-4 py-2 hover:bg-zinc-700 rounded">{{label}}</a>
              </li>
            {{/foreach}}
          </ul>
        {{/if}}
      </li>
    {{/foreach}}
  </ul>
</nav>

    <!-- RIGHT ACTIONS -->
    <div class="flex items-center gap-2">

      <button
        class="rounded-lg p-2 transition hover:bg-zinc-800"
        aria-label="search this site"
        data-ghost-search
      >
        {{> "icons/search"}}
      </button>

      {{#if @site.members_enabled}}
        <div class="hidden lg:flex items-center gap-3">
          {{#unless @member}}
            <a
              class="rounded-lg px-4 py-2 text-sm font-medium text-zinc-200 transition hover:bg-zinc-800 hover:text-white"
              href="#/portal/signin"
              data-portal="signin"
            >
              Login
            </a>
          {{else}}
            <a
              class="rounded-lg bg-zinc-800 px-4 py-2 text-sm font-medium text-white transition hover:bg-zinc-700"
              href="#/portal/account"
              data-portal="account"
            >
              Account
            </a>
          {{/unless}}
        </div>
      {{/if}}

      <!-- BURGER -->
      <button
        class="rounded-lg p-2 transition hover:bg-zinc-800 lg:hidden"
        @click="open = !open"
        aria-label="toggle menu"
      >
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/>
        </svg>
      </button>

    </div>
  </div>

  <!-- MOBILE MENU OVERLAY -->
  <div
    x-show="open"
    x-transition.opacity
    x-cloak
    @click.outside="open = false"
    class="fixed inset-0 z-40 bg-zinc-950/95 backdrop-blur-lg lg:hidden overflow-y"
  >
    <div class="mx-auto mt-16 max-w-7xl px-5">

      <!-- CLOSE BUTTON -->
      <div class="flex justify-end mb-6">
        <button
          @click="open=false"
          class="p-2 rounded-lg hover:bg-zinc-800"
          aria-label="close menu"
        >
          <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 6l12 12M6 18L18 6"/>
          </svg>
        </button>
      </div>

      <!-- MOBILE NAVIGATION -->
<nav class="mobile-site-nav bg-zinc-800 rounded-xl p-3 mb-6" aria-label="mobile navigation">
  <ul class="nav">
    {{#foreach navigation}}
      <li class="{{#if children}}has-children{{/if}}">
        <a href="{{url}}">{{label}}</a>
        {{#if children}}
          <ul class="overflow-hidden max-h-0 transition-all duration-300">
            {{#foreach children}}
                <li>
                <a href="{{url}}" class="block px-4 py-2 hover:bg-zinc-700 rounded">{{label}}</a>
                </li>
            {{/foreach}}
            </ul>
        {{/if}}
      </li>
    {{/foreach}}
  </ul>
</nav>

      <!-- MEMBER BUTTONS -->
      {{#if @site.members_enabled}}
        <div class="flex flex-col gap-3">
          {{#unless @member}}
            <a
              class="rounded-lg bg-zinc-800 px-4 py-2 text-center text-sm font-medium text-white transition hover:bg-zinc-700"
              href="#/portal/signin"
              data-portal="signin"
            >
              Login
            </a>
          {{else}}
            <a
              class="rounded-lg bg-zinc-800 px-4 py-2 text-center text-sm font-medium text-white transition hover:bg-zinc-700"
              href="#/portal/account"
              data-portal="account"
            >
              Account
            </a>
          {{/unless}}
        </div>
      {{/if}}

    </div>
  </div>

</header>
</div>
<script>
document.addEventListener("DOMContentLoaded", () => {

const mobileNav = document.querySelector(".mobile-site-nav");

if(!mobileNav) return;

mobileNav.querySelectorAll("li").forEach(li => {

const submenu = li.querySelector("ul");

if(submenu){

li.classList.add("has-children");

const link = li.querySelector("a");

link.addEventListener("click", e => {

e.preventDefault();

li.classList.toggle("open");

});

}

});

});
</script>

My Css

/** Fonts */

.grenze-thin {
  font-family: "Grenze", serif;
  font-weight: 100;
  font-style: normal;
}

.grenze-extralight {
  font-family: "Grenze", serif;
  font-weight: 200;
  font-style: normal;
}

.grenze-light {
  font-family: "Grenze", serif;
  font-weight: 300;
  font-style: normal;
}

.grenze-regular {
  font-family: "Grenze", serif;
  font-weight: 400;
  font-style: normal;
}

.grenze-medium {
  font-family: "Grenze", serif;
  font-weight: 500;
  font-style: normal;
}

.grenze-semibold {
  font-family: "Grenze", serif;
  font-weight: 600;
  font-style: normal;
}

.grenze-bold {
  font-family: "Grenze", serif;
  font-weight: 700;
  font-style: normal;
}

.grenze-extrabold {
  font-family: "Grenze", serif;
  font-weight: 800;
  font-style: normal;
}

.grenze-black {
  font-family: "Grenze", serif;
  font-weight: 900;
  font-style: normal;
}

.grenze-thin-italic {
  font-family: "Grenze", serif;
  font-weight: 100;
  font-style: italic;
}

.grenze-extralight-italic {
  font-family: "Grenze", serif;
  font-weight: 200;
  font-style: italic;
}

.grenze-light-italic {
  font-family: "Grenze", serif;
  font-weight: 300;
  font-style: italic;
}

.grenze-regular-italic {
  font-family: "Grenze", serif;
  font-weight: 400;
  font-style: italic;
}

.grenze-medium-italic {
  font-family: "Grenze", serif;
  font-weight: 500;
  font-style: italic;
}

.grenze-semibold-italic {
  font-family: "Grenze", serif;
  font-weight: 600;
  font-style: italic;
}

.grenze-bold-italic {
  font-family: "Grenze", serif;
  font-weight: 700;
  font-style: italic;
}

.grenze-extrabold-italic {
  font-family: "Grenze", serif;
  font-weight: 800;
  font-style: italic;
}

.grenze-black-italic {
  font-family: "Grenze", serif;
  font-weight: 900;
  font-style: italic;
}

/** CSS */

:root {
  height: 100vh !important;
  width: 100vw !important;
  overflow-x: hidden !important;

  --zinc-900-90: rgb(24 24 27); /* zinc-900 rgb */
  --zinc-900: #18181b;
}

* {
  font-family: "Grenze" !important;
  color: white !important;
}

html {
  background-repeat: no-repeat !important;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.gh-primary-btn {
  background-color: #19a03b !important;
}

.is-head-left-logo .gh-head-inner {
  grid-template-columns: 1fr 50% 1fr;
}

.gh-head-logo {
  font-size: 2.2rem;
  font-weight: 800;
}

.gh-head-menu,
.gh-head-actions {
  font-size: 1.5rem;
  font-weight: 700;
}

h1,
h2 {
  font-size: 36px !important;
}

.site-content {
  font-size: 18px !important;
}

.site-content h2 {
  margin-bottom: 1%;
  margin-top: 1%;
}

.site-content .single-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.site-content figure {
  display: flex;
  align-items: center;
}

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

.gh-head-actions {
  background: none !important;
}

.cover-image {
  display: none !important;
}

.cover {
  background: none !important;
}

.icon {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.icon-loading {
  width: 26px;
  height: 26px;
}

/** Nav */
[x-cloak]{display:none!important;}

.site-nav ul.nav,
.mobile-site-nav ul.nav{
  margin:0;
  padding:0;
  list-style:none;
}

/* Desktop nav */
.site-nav ul.nav{
  display:flex;
  align-items:center;
  gap:1.5rem;
}
.site-nav ul.nav li{position:relative;}
.site-nav ul.nav li a{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.45rem 0;
  text-decoration:none;
  font-size:.95rem;
  font-weight:600;
  color:rgb(228 228 231);
  transition:color .2s;
}
.site-nav ul.nav li a:hover,
.site-nav ul.nav li.nav-current>a,
.site-nav ul.nav li.nav-current-parent>a{
  color:white;
}

/* Desktop dropdown */
.site-nav ul.nav li ul{
  position:absolute;
  top:calc(100% + 12px);
  left:0;
  display:none;
  flex-direction:column;
  min-width:220px;
  padding:.55rem;
  border-radius:1rem;
  background:rgba(24,24,27,.96);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(16px);
  box-shadow:0 18px 48px rgba(0,0,0,.28);
  z-index:200;
}
.site-nav ul.nav li:hover>ul,
.site-nav ul.nav li.open>ul{
  display:flex;
}
.site-nav ul.nav li ul li{width:100%;}
.site-nav ul.nav li ul a{
  display:block;
  padding:.7rem .85rem;
  border-radius:.8rem;
  white-space:nowrap;
}
.site-nav ul.nav li ul a:hover{background:rgb(39 39 42); color:white;}

/* Mobile nav */
.mobile-site-nav ul.nav{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}
.mobile-site-nav li{list-style:none;}
.mobile-site-nav a{
  display:block;
  padding:.8rem 1rem;
  border-radius:.8rem;
  text-decoration:none;
  font-size:1rem;
  color:rgb(228 228 231);
}
.mobile-site-nav a:hover,
.mobile-site-nav .nav-current>a,
.mobile-site-nav .nav-current-parent>a{
  background:rgb(39 39 42);
  color:white;
}

/* Mobile nested */
.mobile-site-nav li ul{
  display:none;
  margin-top:.35rem;
  margin-left:.75rem;
  padding-left:.75rem;
  border-left:1px solid rgba(255,255,255,.14);
}
.mobile-site-nav li.open>ul{
  display:flex;
  flex-direction:column;
}
/* Arrow for items with children */
.mobile-site-nav li.has-children>a::after{
  content:"▾";
  float:right;
  opacity:.6;
}


/** Utils */
.u-permalink {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 50;
  outline: none;
}

.u-placeholder {
  position: relative;
  z-index: 10;
  background-color: var(--lighter-gray-color);
}

.u-placeholder::before {
  display: block;
  content: "";
}

.u-placeholder.horizontal::before {
  padding-bottom: 50%;
}

.u-placeholder.rectangle::before {
  padding-bottom: 62.5%;
}

.u-placeholder.square::before {
  padding-bottom: 100%;
}

.u-object-fit {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tns-outer {
  position: relative;
  padding: 0 !important;
}

.tns-outer [hidden] {
  display: none !important;
}

.tns-outer [aria-controls],
.tns-outer [data-action] {
  cursor: pointer;
}

.tns-slider {
  -webkit-transition: all 0s;
  -moz-transition: all 0s;
  transition: all 0s;
}

.tns-slider > .tns-item {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.tns-horizontal.tns-subpixel {
  white-space: nowrap;
}

.tns-horizontal.tns-subpixel > .tns-item {
  display: inline-block;
  white-space: normal;
  vertical-align: top;
}

.tns-horizontal.tns-no-subpixel::after {
  display: table;
  clear: both;
  content: "";
}

.tns-horizontal.tns-no-subpixel > .tns-item {
  float: left;
}

.tns-horizontal.tns-carousel.tns-no-subpixel > .tns-item {
  margin-right: -100%;
}

.tns-no-calc {
  position: relative;
  left: 0;
}

.tns-gallery {
  position: relative;
  left: 0;
  min-height: 1px;
}

.tns-gallery > .tns-item {
  position: absolute;
  left: -100%;
  -webkit-transition:
    transform 0s,
    opacity 0s;
  -moz-transition:
    transform 0s,
    opacity 0s;
  transition:
    transform 0s,
    opacity 0s;
}

.tns-gallery > .tns-slide-active {
  position: relative;
  left: auto !important;
}

.tns-gallery > .tns-moving {
  -webkit-transition: all 0.25s;
  -moz-transition: all 0.25s;
  transition: all 0.25s;
}

.tns-autowidth {
  display: inline-block;
}

.tns-lazy-img {
  opacity: 0.6;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.tns-lazy-img.tns-complete {
  opacity: 1;
}

.tns-ah {
  -webkit-transition: height 0s;
  -moz-transition: height 0s;
  transition: height 0s;
}

.tns-ovh {
  overflow: hidden;
}

.tns-visually-hidden {
  position: absolute;
  left: -10000em;
}

.tns-transparent {
  visibility: hidden;
  opacity: 0;
}

.tns-fadeIn {
  z-index: 0;
  opacity: 1;
}

.tns-normal,
.tns-fadeOut {
  z-index: -1;
  opacity: 0;
}

.tns-vpfix {
  white-space: nowrap;
}

.tns-vpfix > div,
.tns-vpfix > li {
  display: inline-block;
}

.tns-t-subp2 {
  position: relative;
  width: 310px;
  height: 10px;
  margin: 0 auto;
  overflow: hidden;
}

.tns-t-ct {
  position: absolute;
  right: 0;
  width: 2333.3333333%;
  width: -webkit-calc(100% * 70 / 3);
  width: -moz-calc(100% * 70 / 3);
  width: calc(100% * 70 / 3);
}

.tns-t-ct::after {
  display: table;
  clear: both;
  content: "";
}

.tns-t-ct > div {
  float: left;
  width: 1.4285714%;
  width: -webkit-calc(100% / 70);
  width: -moz-calc(100% / 70);
  width: calc(100% / 70);
  height: 10px;
}

.tns-controls button {
  position: absolute;
  top: -86px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  color: var(--dark-gray-color);
  text-align: center;
  background-color: var(--white-color);
  border: 1px solid var(--light-gray-color);
  border-radius: 3px;
  outline: none;
  transition: color 0.5s var(--animation-base);
}

.tns-controls button[disabled] {
  color: var(--mid-gray-color);
  cursor: default;
}

.tns-controls button svg {
  width: 18px;
  height: 18px;
}

.tns-controls button[data-controls="prev"] {
  right: 34px;
}

.tns-controls button[data-controls="next"] {
  right: 0;
}

.home-template.with-full-cover:not(.portal-visible)
  .gh-portal-triggerbtn-iframe {
  pointer-events: none;
  opacity: 0;
}

/** Animations */
.animate__animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes bounceIn {
  from,
  20%,
  40%,
  60%,
  80%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    transform: scale3d(0.7, 0.7, 0.7);
  }

  40% {
    transform: scale3d(1.1, 1.1, 1.1);
  }

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
}

.animate__bounceIn {
  animation-name: bounceIn;
  animation-duration: 0.3s;
}

@keyframes zoomOut {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    transform: scale3d(0.7, 0.7, 0.7);
  }

  to {
    opacity: 0;
  }
}

.animate__zoomOut {
  animation-name: zoomOut;
  animation-duration: 0.3s;
}

/** Images */

I use the latest Ghost Version in Docker
My URL is https://burgverein.tflsystems.ddns.net

My Navigation is structured like this:

Thank you very much in advance for your help!

Cathy_Sarisky · March 14, 2026, 10:50am

That’s a lot of code, but I don’t see where you shared the code that actually makes that [has-child] structure work.

Are there errors in the browser console?

MrWho97 · March 14, 2026, 11:00am

In fact, I had previously used a plugin that was supposed to handle the has-child structure for me – specifically the script of rakihub/ghost-code-injection.

<!-- script src="https://cdn.jsdelivr.net/gh/rakihub/ghost-code-injection@main/nested-menu/built/nested-menu.min.js"></script -->

However, it does not produce the desired result, even though there are no errors in the console. As an alternative, I tried to implement the functionality myself. My current code looks like this:*

document.addEventListener("DOMContentLoaded", () => { const mobileNav = document.querySelector(".mobile-site-nav"); if (!mobileNav) return; mobileNav.querySelectorAll("li").forEach(li => { const submenu = li.querySelector("ul"); if (submenu) { li.classList.add("has-children"); const link = li.querySelector("a"); link.addEventListener("click", e => { e.preventDefault(); li.classList.toggle("open"); }); } }); });

This should correctly adds the class has-children, but the behavior (e.g. B. opening/closing the submenus) does not work as expected. I suspect that either the CSS rules for.open are missing or that the event handling is not optimal. Do you have any idea what could be causing this? Or is there a better solution to implement the has-child structure with the desired interactions?

Or maybe i am wrong or missing something?

Cathy_Sarisky · March 14, 2026, 11:55am

Oh, I assumed you were trying to set up dropdowns on desktop. You’re targeting mobileNav?

Topic		Replies	Views
Add Dropdowns to Main Menu Through the Site Admin (Copy & Paste into Site Header/Footer Injections) Themes	86	11481	March 26, 2025
Hover-Down Submenus for Casper Here Themes	82	5015	April 24, 2024
No dropdown menu option Themes	12	1536	October 6, 2022
Dropdown menu that works for all official free Ghost themes Themes	13	822	April 3, 2025
Adding a Dropdown Menu in the Solo Theme Using Ghost	35	2761	June 16, 2023

Problems with pop-up navigation in the modified Edition Theme

Related topics