# Secondary nav social icons | Primary disappearing on scroll

**URL:** <https://forum.ghost.org/t/secondary-nav-social-icons-primary-disappearing-on-scroll/12994>\
**Category:** Developer help\
**Created:** [March 26, 2020, 7:32am UTC](https://forum.ghost.org/t/secondary-nav-social-icons-primary-disappearing-on-scroll/12994 "2020-03-26T07:32:16Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![l3rett](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/l3rett/32/7009_2.png) [@l3rett](https://forum.ghost.org/u/l3rett)\
**Post date:** [March 26, 2020, 7:32am UTC](https://forum.ghost.org/t/secondary-nav-social-icons-primary-disappearing-on-scroll/12994/1 "2020-03-26T07:32:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![DavidDarnes](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/daviddarnes/32/3533_2.png) [@DavidDarnes](https://forum.ghost.org/u/DavidDarnes)\
**Post date:** [March 26, 2020, 10:10am UTC](https://forum.ghost.org/t/secondary-nav-social-icons-primary-disappearing-on-scroll/12994/2 "2020-03-26T10:10:05Z")

</div>

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](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 🙂

---

<div class="post-metadata">

**Author:** ![l3rett](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/l3rett/32/7009_2.png) [@l3rett](https://forum.ghost.org/u/l3rett)\
**Post date:** [March 26, 2020, 10:43am UTC](https://forum.ghost.org/t/secondary-nav-social-icons-primary-disappearing-on-scroll/12994/3 "2020-03-26T10:43:34Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![DavidDarnes](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/daviddarnes/32/3533_2.png) [@DavidDarnes](https://forum.ghost.org/u/DavidDarnes)\
**Post date:** [March 26, 2020, 10:57am UTC](https://forum.ghost.org/t/secondary-nav-social-icons-primary-disappearing-on-scroll/12994/4 "2020-03-26T10:57:04Z")

</div>

That appears to 404 for me?

---

<div class="post-metadata">

**Author:** ![l3rett](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/l3rett/32/7009_2.png) [@l3rett](https://forum.ghost.org/u/l3rett)\
**Post date:** [March 26, 2020, 10:58am UTC](https://forum.ghost.org/t/secondary-nav-social-icons-primary-disappearing-on-scroll/12994/5 "2020-03-26T10:58:31Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![l3rett](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/l3rett/32/7009_2.png) [@l3rett](https://forum.ghost.org/u/l3rett)\
**Post date:** [March 26, 2020, 11:37am UTC](https://forum.ghost.org/t/secondary-nav-social-icons-primary-disappearing-on-scroll/12994/6 "2020-03-26T11:37:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![DavidDarnes](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/daviddarnes/32/3533_2.png) [@DavidDarnes](https://forum.ghost.org/u/DavidDarnes)\
**Post date:** [March 26, 2020, 11:50am UTC](https://forum.ghost.org/t/secondary-nav-social-icons-primary-disappearing-on-scroll/12994/7 "2020-03-26T11:50:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![l3rett](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/l3rett/32/7009_2.png) [@l3rett](https://forum.ghost.org/u/l3rett)\
**Post date:** [March 26, 2020, 12:06pm UTC](https://forum.ghost.org/t/secondary-nav-social-icons-primary-disappearing-on-scroll/12994/8 "2020-03-26T12:06:23Z")

</div>

Sure, it’s [https://monstermounta.in/](https://monstermounta.in/)  
When the sticky bar activates the left side nav dissapears ☹

Thanks

---

<div class="post-metadata">

**Author:** ![DavidDarnes](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/daviddarnes/32/3533_2.png) [@DavidDarnes](https://forum.ghost.org/u/DavidDarnes)\
**Post date:** [March 30, 2020, 8:33am UTC](https://forum.ghost.org/t/secondary-nav-social-icons-primary-disappearing-on-scroll/12994/9 "2020-03-30T08:33:48Z")

</div>

The site is failing to load for me 😓

---

<div class="post-metadata">

**Author:** ![l3rett](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/l3rett/32/7009_2.png) [@l3rett](https://forum.ghost.org/u/l3rett)\
**Post date:** [March 30, 2020, 9:43am UTC](https://forum.ghost.org/t/secondary-nav-social-icons-primary-disappearing-on-scroll/12994/10 "2020-03-30T09:43:17Z")

</div>

Sorry David, changed domain over the weekend!!

[https://monstermtn.com](https://monstermtn.com)

Thanks  
B

---

<div class="post-metadata">

**Author:** ![DavidDarnes](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/daviddarnes/32/3533_2.png) [@DavidDarnes](https://forum.ghost.org/u/DavidDarnes)\
**Post date:** [March 30, 2020, 2:53pm UTC](https://forum.ghost.org/t/secondary-nav-social-icons-primary-disappearing-on-scroll/12994/11 "2020-03-30T14:53:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![l3rett](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/l3rett/32/7009_2.png) [@l3rett](https://forum.ghost.org/u/l3rett)\
**Post date:** [March 30, 2020, 4:49pm UTC](https://forum.ghost.org/t/secondary-nav-social-icons-primary-disappearing-on-scroll/12994/12 "2020-03-30T16:49:24Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![l3rett](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/l3rett/32/7009_2.png) [@l3rett](https://forum.ghost.org/u/l3rett)\
**Post date:** [March 30, 2020, 4:49pm UTC](https://forum.ghost.org/t/secondary-nav-social-icons-primary-disappearing-on-scroll/12994/13 "2020-03-30T16:49:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![DavidDarnes](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/daviddarnes/32/3533_2.png) [@DavidDarnes](https://forum.ghost.org/u/DavidDarnes)\
**Post date:** [March 30, 2020, 5:07pm UTC](https://forum.ghost.org/t/secondary-nav-social-icons-primary-disappearing-on-scroll/12994/14 "2020-03-30T17:07:24Z")

</div>

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:

```auto
{{#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}}

```

---

<div class="post-metadata">

**Author:** ![l3rett](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/l3rett/32/7009_2.png) [@l3rett](https://forum.ghost.org/u/l3rett)\
**Post date:** [March 30, 2020, 8:13pm UTC](https://forum.ghost.org/t/secondary-nav-social-icons-primary-disappearing-on-scroll/12994/15 "2020-03-30T20:13:10Z")

</div>

Cheers David!