Secondary nav social icons | Primary disappearing on scroll

Developer help
1

Hi guys,

Following a very helpful tutorial from @DavidDarnes I’ve managed to get social SVG icons in my secondary nav. When I’m at the top of the page I can see my primary nav as links and the secondary nav as icons – so all is working how it should be.

However, when I scroll and the nav becomes sticky my primary links dissapear. It looks as if the SVG rule is being applied when I scroll and my primary nav links are now applying the same rules as the secondary nav, essentially becoming icons that don’t excist.

Is there anyway to fix this?

Many thanks
B

1 Like
2

Great job adding those social links!

Sounds like you might be using Casper or Lyra theme? In casper for example the site-nav.hbs partial is used in more than once on a single page, one for the header at the top of the page and one for the fixed header which becomes visible when you scroll down.

Try and locate the multiple instances of these in your custom theme and make sure you’re replacing the nav at the right point, for Casper I would insert the custom social nav here:
https://github.com/TryGhost/Casper/blob/master/partials/site-nav.hbs#L21
Which should replace it in all areas.

I hope this makes sense? Let us know if you have any problems, sharing your code via something like GitHub would also be helpful :slightly_smiling_face:

3

Thanks for the reply David!
I’m using the Casper theme yep – please see Github below:
https://gist.github.com/I3rett/3a8a42d3397858927d45dafed3e87669

Apologies, I’m a bit new to all of this! Could you please instruct? :)
Thanks again

4

That appears to 404 for me?

5

Sorry my Github has been flagged for some reason :smile: I’ll get back to you shortly!

6

Hi David, this should do it – https://gist.github.com/Brett-C/e252ce6c60e7c32cb9a934bea2926ffe
B

7

Hmm, that code looks fine. Could you share the site you’re doing this on and point out where it’s not working?

8

Sure, it’s https://monstermounta.in/
When the sticky bar activates the left side nav dissapears :frowning:

Thanks

9

The site is failing to load for me :sweat:

10

Sorry David, changed domain over the weekend!!

https://monstermtn.com

Thanks
B

11

Have you made any other customisations to your theme? I checked in the browser inspector and you’re rendering your secondary nav twice in the sticky header instead of once for primary and secondary each.

12

I have but I this was happening from a fresh install of casper :frowning:
Thanks

13

Thanks for the info – do you know how I’d go about fixing this? Cheers

14

The only thing I can think of is that you might not be checking if it’s the secondary nav before rendering it. In the tutorial you’ll see {{#if isSecondary}}, which conditionally displays the social links instead of the regular navigation:

{{#if isSecondary}}
    <ul class="nav" role="menu">
        {{#foreach navigation}}
            <li class="nav-{{slug}}" role="menuitem">
                <a href="{{url}}" class="social-link">
                    <svg width="16" height="16" role="img" aria-label="{{slug}} icon">
                        <use xlink:href="#{{slug}}"></use>
                    </svg>
                </a>
            </li>
        {{/foreach}}
    </ul>
{{else}}
    <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}}
1 Like
15

Cheers David!

1 Like