How can I customize a nav bar to add a sub menu

Themes
1

I have the following code in a custom theme I’m setting up:


      {{#foreach navigation}}
      <li {{#if current}}class="current-menu-item page_item current_page_item"{{/if}}>
        <a href="{{url absolute="true"}}"><span>{{label}}</span></a>
      </li>

      {{/foreach}}

      <!-- End the loop -->
    </ul>
</nav><a class="responsive-menu-toggle" href="#"><i class="icon-menu-fine"></i></a>

I would like to add a sub menu so I’ve tried this, my assumption being that if secondary would work like an if statement and the block would display if secondary menu exists:

{{#foreach navigation}}
  <li {{#if current}}class="current-menu-item page_item current_page_item"{{/if}}>
    <a href="{{url absolute="true"}}"><span>{{label}}</span></a>
      {{#if isSecondary}}
    <ul class="sub-menu">

      {{navigation type=“secondary”}}
      <li>
      <a href="{{url absolute=“true”}}">{{label}}
      </li>
    </ul>
            {{/if}}
  </li>

  {{/foreach}}

How would I achieve this?

2

The {{#if isSecondary}} statement works in the navigation partial only, if you call the partial with type="secondary" then the condition will be fulfilled. Basically it provides a way to style your secondary navigation differently.

If you want to check whether there is secondary navigation you can use:

{{#if @site.secondary_navigation}}

{{/if}}

However, with your current code you would add the secondary navigation to each item from your primary navigation and I am not sure if that is what you want to achieve.

3

Thanks for the response! It’s greatly appreciated. Here is my attempt but it doesn’t appear.

  {{#foreach navigation}}
  <li {{#if current}}class="current-menu-item page_item current_page_item"{{/if}}>
    <a href="{{url absolute="true"}}"><span>{{label}}</span></a>
  {{#if isSecondary}}
    <ul class="sub-menu">
      {{#foreach navigation type="secondary"}}
        <li>
            <a href="content/biolab/about.html#about"><span>{{label}}</span></a>
        </li>
      {{/foreach}}
    </ul>
  {{/if}}
  </li>
  {{/foreach}}

Is this how you meant that I should structure it?

4

Like I said I am not sure what you want to do specifically here. To which item do you want to add a submenu?

I have an example, with maybe something similar:

<nav class="header__menu">
  {{!-- Main navigation --}}
  {{navigation}}

  {{!-- Secondary navigation --}}
  {{#if @site.secondary_navigation}}
    {{!-- Secondary Navigation Button --}}
     <button class="js-dropdown-toggle" title="{{t "More"}}">
       {{t "More"}}
     </button>
     <div class="header__dropdown">
        {{navigation type="secondary"}}
     </div>
  {{/if}}
</nav>

Here I have a button which acts as a toggle for the secondary navigation. (of course there is some js in the background to make it work).

In your case I am not sure what you actually want to do.

5

Hi, I’m very new at coding in HTML/CSS, and especially at Handlebars. It looks like the above code creates dropdown menus for the secondary navigation, on the right side of the nav bar? We already have items (social media links) in our secondary navigation bar, and we don’t want to mess with those. If we want to create dropdown menus on the left side of the nav bar in primary navigation, would changing all of the “secondary” to “primary” in the code suffice?

Also, I’ve never worked with any JavaScript before, and I’ve successfully modified CSS to produce what I’d like but never coded it from scratch. Would you mind instructing me a little bit about how to get what I assume is the JavaScript code associated with js-dropdown-toggle and where to paste it in my theme files? And if possible, directing me to some sample CSS for me to paste in just to get this working before I modify it/customize it for our website?

(As a sidenote, we’re an undergraduate neuroscience journal, check out our website at greymattersjournal.org/).

Thank you so much for any guidance you can provide on this!!

6

It will depand at themes, but I’m used theme I’m found at github
kost

7

Do you happen to have a link to the theme you used? Does it have dropdown menu capabilities?

Thanks!

8

So, if you omit the type="secondary" part the output is your primary navigation, so you can do that if you for the dropdown.

As for the javascript part, you need a click event handler for the dropdown toggle button, something like this:

const dropdownBtn = document.querySelector('.js-dropdown-toggle');
const headerDropdown = document.querySelector('.header__dropdown');
if (dropdownBtn && headerDropdown) {
  dropdownBtn.onclick = function(event) {
    headerDropdown.classList.toggle('is-active');
  }
}

What this will do is add an is-active class to the header__dropdown element, and from there you have to add the css for the active state.

I don’t have sample css, but I think think you can find some examples quite easily.

9

Thank you so much again for this help. I apologize in advance if these questions are overly elementary, I have very little experience, and barely know what I need to learn.

  • Does the code you pasted above, beggining with <nav class “header__menu”> need to go in the site-nav.hbs or the navigation.hbs?
  • It seems like this method makes each button individually – is there a way to import them from Ghost’s Navigation section under Design in the web editor, or a text file, or some other similar interface that’s easy to edit for future users of my website who might not be tech savvy (not that I’m exactly tech savvy myself…) and automatically create dropdown menus based on indentation markers or some other delimiter?
  • Where should the JavaScript snippet you have so kindly provided me with go? I currently have it in a separate file in the theme assets. How do I get it to operate on the appropriate HTML elements?
  • Based on my limited understanding of this code, it looks like it sets the dropdown menu to be active – is there other code necessary to put links to other pages in that dropdown menu? What would this look like?

Thanks again, if you don’t have time to answer all this I cannot blame you. The help you have provided is more than enough – best wishes to you!