Jump to content

Making ticker that is in secondary menu still appear in header of mobile view

Recommended Posts

Posted

Site URL: https://startrescue.org/

There is a counting ticker that is placed in the secondary navigation, so it appears in the right part of the header in desktop view. Is there a way to continue showing the ticker in the header in mobile view? Now, by default, it disappears along with all the other navigation links in mobile view. I have researched a bit and have found that this may be accomplished by javascript and css. Anybody know how this can be done?

Thank you

  • Replies 2
  • Views 368
  • Created
  • Last Reply
Posted

I found a similar post titled "How to make header icons persist from web to mobile view? "with a solution posted by tuanphan that almost works for me. I copied the code solution in Add to Settings > Advanced > Code Injection > Header:

<script>
$(document).ready(function() { 
        $('<a href="tel:0123.456.789"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path d="M20 22.621l-3.521-6.795c-.008.004-1.974.97-2.064 1.011-2.24 1.086-6.799-7.82-4.609-8.994l2.083-1.026-3.493-6.817-2.106 1.039c-7.202 3.755 4.233 25.982 11.6 22.615.121-.055 2.102-1.029 2.11-1.033z"/></svg></a><a href="mailto:abc@xyz.com"><svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24"><path d="M0 3v18h24v-18h-24zm21.518 2l-9.518 7.713-9.518-7.713h19.036zm-19.518 14v-11.817l10 8.104 10-8.104v11.817h-20z"/></svg></a>').insertBefore('button.Mobile-bar-menu');
    });
    </script>


And replaced the function code with mine:

<script>
$(document).ready(function() { 
        $('<div class="tick" data-value="00000" data-did-init="handleTickInit"><div data-value-mapping="indexes" data-layout="horizontal fit" data-transform="round -> pad(00000) -> split -> delay(random, 100, 150)"><span data-view="flip" data-transform="arrive(1, 0.01) -> round -> limit(0,9)"> </span><span data-view="flip" data-transform="arrive(1, 0.01) -> round -> limit(0,9)"> </span><span class="tick-text-inline">,</span><span data-view="flip" data-transform="arrive(1, 0.01) -> round -> limit(0,9)"> </span><span data-view="flip" data-transform="arrive(1, 0.01) -> round -> limit(0,9)"> </span><span data-view="flip" data-transform="arrive(1, 0.01) -> round -> limit(0,9)"> </span></div><p id="ticker-caption">ANIMALS TRANSPORTED<br />TO DATE BY START</p></div>').insertBefore('button.Mobile-bar-menu');
    });
    </script>

I can see that the ticker is appearing, but the data is not showing through. Does anybody know why?

Thanks.

Posted

I forgot to add images that might help explain the problem.

Here is how it should look:

1360278045_ScreenShot2021-05-06at10_56_11AM.png.78672fe623f34d022c6e610a5d8461e6.png

But it looks like this:

2051534951_ScreenShot2021-05-06at10_56_52AM.png.274720358b038f2b11baae6c4655dfa3.png

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.