How can I implement the secondary navigation in the Lyra theme?

[berrysauce]

Hey there,
I‘m not good at making changes to my Ghost Blog and I wanted to ask where and how exactly I can integrate the secondary navigation. I‘ll attach an Image where I want it to be displayed. Has anyone done this already?

P.S. I know that a tutorial exists

Thanks in advance!

[ijongkim]

{{#if @site.secondary_navigation}}
    <div>
	<ul>
	    {{navigation type="secondary"}}
	</ul>
    </div>
{{/if}}

This is a very basic implementation. You’ll have to style it yourself to fit your them. But that’s how you can access the secondary navigation in your theme.

[berrysauce]

Thanks! Now, where do I put it?

[ijongkim]

If you look inside the theme’s default.hbs template file, you will see an footer element with the class site-footer (ctrl+f if you can’t find it). That’s where you will want to include the code snippet I shared earlier.

Again, you will need to rework the html and css to fit your needs (for example, maybe you don’t want the secondary links nested as an unordered list).

[DavidDarnes]

Might also be worth checking out Casper which already has the secondary navigation implemented, you could copy the code used here and place it in the same file in Lyra
https://github.com/TryGhost/Casper/blob/master/partials/site-nav.hbs#L20-L34

[theodorechu]

Hi everyone, I made the necessary changes here:
https://github.com/TheodoreChu/Lyra/commit/380943be857f828dc7d1a83407872127daf5ced4
You’ll need to update your partials/navigation.hbs with this:

{{#if isSecondary}}
    {{!-- secondary navigation --}}
        {{#foreach navigation}}
            <a class="{{link_class for=(url) class=(concat "nav-" slug)}}" href="{{url absolute="true"}}">{{label}}</a>
        {{/foreach}}
{{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}} 

Then add this to default.hbs wherever you want (before or after Facebook/Twitter. It’s before in above example):

 {{#if @site.secondary_navigation}}
 {{navigation type="secondary"}}
 {{/if}}

The result is that if you put this in your secondary navigation,

then you will get this:

Close up: