Scrolling announcement in line with logo

Store Design
, , ,
1

I am updating my store and changing to the Dawn theme. I’ve added a scrolling tagline/message to the header by inserting the following code into the header-dropdown-menu.liquid;

<style>
.scroll-left {
 height: 50px;	
 overflow: hidden;
 position: relative;
 background: white;
 color: black;
 border: 1px solid white;
 font-size: 32px;
 font-family: Loved by the King;
}
.scroll-left p {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 white-space: nowrap;
 /* Starting position */
 transform:translateX(100%);
 /* Apply animation to this element */
 animation: scroll-left 60s linear infinite;
}
/* Move it (define the animation) */
@keyframes scroll-left {
 0%   {
 transform: translateX(100%); 		
 }
 100% {
 transform: translateX(-100%); 
}
}
</style>

<div class="scroll-left">
<p>Tagline 1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;*
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      Tagline 2
</p>
</div>

I’d like to know how I might align the text in our logo with the scrolling message so that they both appear on the same line?

logo tagline
logo tagline959×200 27.4 KB

2

Hi @RosewoodFarm

Great question :+1: You’ve got your scrolling tagline working, now the key is aligning it with the logo so both sit on the same row in Dawn’s header. Right now, your scroll block is stacking below because it’s a full-width div.

Here’s how you can fix it:

Step 1: Wrap logo + scrolling text in a flex container

In header-dropdown-menu.liquid (or wherever you placed your code), wrap them like this:

<div class="header-with-scroll">
  <div class="site-logo">
    {{ header.logo }}  {# Dawn logo output, or keep existing logo code #}
  </div>
  <div class="scroll-left">
    <p>Tagline 1&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;* &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Tagline 2</p>
  </div>
</div>

Step 2: Flexbox alignment in CSS

Add this CSS (inside your <style> or in theme’s custom CSS):

.header-with-scroll {
  display: flex;
  align-items: center; /* vertically centers logo + tagline */
  gap: 20px; /* space between logo and tagline */
}

.header-with-scroll .site-logo {
  flex: 0 0 auto; /* logo keeps its natural size */
}

.header-with-scroll .scroll-left {
  flex: 1; /* tagline takes remaining space */
  height: 50px;
  overflow: hidden;
  position: relative;
  background: white;
  color: black;
  border: 1px solid white;
  font-size: 32px;
  font-family: "Loved by the King", cursive; /* safer font declaration */
}

@media (max-width: 768px) {
  .header-with-scroll {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}
3

Thank you! Just one question - I’m not quite following what this line means;

{{ header.logo }} {# Dawn logo output, or keep existing logo code #}

4

Only add this code.

{{ header.logo }}
5

Wrap your logo and scrolling message in a flex container and align them horizontally:

<div style="display:flex; align-items:center; justify-content:space-between;">
  <!-- Logo -->
  <div class="site-logo">
    {{ 'logo.png' | asset_url | image_tag: 'Logo' }}
  </div>

  <!-- Scrolling Tagline -->
  <div class="scroll-left">
    <p>Tagline 1&nbsp;&nbsp;&nbsp; * &nbsp;&nbsp;&nbsp; Tagline 2</p>
  </div>
</div>

And in CSS, adjust .scroll-left so it doesn’t push below the logo:

.scroll-left {
  flex: 1;
  height: 50px;
  overflow: hidden;
  position: relative;
  background: white;
  color: black;
  font-size: 32px;
  font-family: Loved by the King;
}

This ensures the logo and scrolling text stay on the same line.