Jump to content

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

Recommended Posts

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

Link to comment
  • Replies 2
  • Views 280
  • Created
  • Last Reply

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.

Link to comment

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.