marquee add clickable link and fixed to top

Store Design
, , , ,

Topic summary

A user is implementing a marquee banner at the top of their store header using node-marquee library. The banner displays text about “Empowering Indigenous Futures” and donation counts with arrow graphics.

Current Status:

  • The marquee code is functional and placed in a custom liquid block
  • Uses custom CSS styling (white text on dark background, 14px font, Work Sans family)

Requested Help:

  • Make the entire marquee bar clickable as a link
  • Fix/pin the marquee to the top of the header

The user has working code but needs guidance on where and how to add the clickable link functionality and top-positioning to their existing implementation.

Summarized with AI on November 6. AI used: claude-sonnet-4-5-20250929.
1

Im trying to add the marquee bar as a clickable link and fix to top of header How can I achieve this?

My code is below -

<script src="https://cdn.jsdelivr.net/npm/node-marquee@3.0.6/build/cdn/index.min.js"></script>
<div class='marqTOP'>
<div id="node-marqueeTOP">
  <span>EMPOWERING INDIGENOUS FUTURES  <img src="https://cdn.shopify.com/s/files/1/0564/3046/1030/files/arrows_x_white.svg?v=1711223622" width="18" style="margin-bottom:-6px;">  OVER 325 DONATIONS TO DATE  <img src="https://cdn.shopify.com/s/files/1/0564/3046/1030/files/CEDAR_-_white.svg?v=1725517662" width="18" style="margin-bottom:-4px;"></span>
</div>
</div>
<style>
  .marqTOP{
  border-top: none;
  border-bottom: none;
  padding-top:5px;
  padding-bottom:5px;
  background-color:#a10000;
  color:#ffffff;
  font-size:14px;
  font-family: work sans;
  font-weight:400;
  letter-spacing:0.06rem;
  }
</style>
<script>
nodeMarquee({
    parent: '#node-marqueeTOP',
    speed: -0.6
});
</script>
2

my code works fine… it is put into custom liquid block and work that way. i just need what and where to add in to my existing code. Tanks