How to modify the secondary navigation template?

Developer help
1

Hello,

I’m locally developping a v3.1.1 Ghost Theme in which I want to use the recently introcuded secondary navigation. The secondary navigation appears correctly in my theme, but I want it to have its own HTML markup.

I know that it is possible to do so for the main navigation by creating a file ./partials/navigation.hbs (called via {{navigation}}).

So, having added {{navigation type="secondary"}} in a template, I’ve created ./partials/navigation-secondary.hbs and ./partials/secondary-navigation.hbs in order to customize the navigation markup.

Unfortunately, none of them works : my secondary navigation keeps using the default navigation template.

Did I miss something ? :thinking:

Thanks a lot in advance if you can help me to resolve this little question.

1 Like
2

Hey @Mathieu_Rouault :wave: It’s possible to use a conditional in the ./partials/navigation.hbs file. Eg:

{{#if isSecondary}}
    {{!-- secondary navigation --}}
    <nav>
        {{#foreach navigation}}
            <a class="{{link_class for=(url) class=(concat "nav-" slug)}}" href="{{url absolute="true"}}">{{label}}</a>
        {{/foreach}}
    </nav>
{{else}}
    {{!-- primary navigation --}}
    <ul class="nav" role="menu">
        {{#foreach navigation}}
            <li class="{{link_class for=(url) class=(concat "nav-" slug)}}" role="menuitem"><a href="{{url absolute="true"}}">{{label}}</a></li>
        {{/foreach}}
    </ul>
{{/if}}
5 Likes
3

Thank you @Kevin ! It works like a charm. :smiley:

4

Which naming worked on the partial file? ./partials/navigation-secondary.hbs or ./partials/secondary-navigation.hbs

5

Hey @impactcolor, as Kevin suggested here, you could use {{#if isSecondary}} conditional inside partials/navigation.hbs file.

1 Like