Customizing Secondary Navigation in Footer

Themes
1

I’m trying to customize my secondary navigation in my footer, this code is close to working - but all of the URLs are pointing to my root URL and not the specific pages. What am I doing wrong here?

    <footer class="site-footer outer">
        <div class="inner">
            <section class="copyright">Copyright &copy; 2023. All Rights Reserved.</section>
            <nav class="site-footer-nav">               
                <ul class="nav">
                        {{#foreach @site.secondary_navigation}}
                            <li class='{{link_class for=(url) class=(concat 'nav-' slug)}}'><a href='{{url absolute='true'}}'>{{label}}</a></li>
                        {{/foreach}}
                    <li><a href="#" onclick="window.displayPreferenceModal();return false;" id="termly-consent-preferences">Privacy Preferences</a>
                </ul>
            </nav>
        </div>
    </footer>
2

Are {{slug}} and {{label}} working as expected? I think you just need ‘/{{slug}}’ for those links.

p.s. If you’re running locally, using ghost run -D to start Ghost and the {{log}} helper can be super useful.

3

label works, slug does not.

4

I think you need to put your navigation code in the ./partials/navigation.hbs file. Otherwise, the attributes will not work.

A navigation loop will not work in other partial templates or theme files. Ghost Handlebars Theme Helpers: navigation

Your footer would look like:

<footer class="site-footer outer">
    <div class="inner">
      <section class="copyright">Copyright &copy; 2023. All Rights Reserved.</section>
      {{#if @site.secondary_navigation}}
        <nav class="site-footer-nav">
          <ul class="nav">
            {{ navigation type='secondary' }}
            <li><a href="#" onclick="window.displayPreferenceModal();return false;" id="termly-consent-preferences">Privacy Preferences</a>
          </ul>
        </nav>
      {{/if}}
    </div>
</footer>

And ./partials/navigation.hbs

{{#foreach navigation}}
<li class='{{link_class for=(url) class=(concat 'nav-' slug)}}'><a href='{{url absolute='true'}}'>{{label}}</a></li>
{{/foreach}}

You may want to output different list item codes, one for the footer and one for the header, so the navigation.hbs file may look like this:

{{#if isSecondary}}
  {{#foreach navigation}}
    <li class='{{link_class for=(url) class=(concat 'nav-' slug)}}'><a href='{{url absolute='true'}}'>{{label}}</a></li>
  {{/foreach}}
{{else}}
  {{#foreach navigation}}
    <li class='{{link_class for=(url) class=(concat 'nav-' slug)}}'><a href='{{url absolute='true'}}'>{{label}}</a></li>
  {{/foreach}}
{{/if}}

Ghost Handlebars Theme Helpers: navigation

2 Likes
5

That worked, I don’t know why Iwas so hesitant to trying that in the first place. I guess I thought it was going to break the header, but then looking at it - it ended up being pretty straight forward.

1 Like