Announcement bar under sticky header (Debut Theme)

[Elisaw]

Hello I am using Debut Theme and want to have my banner appear under the sticky navigation (site-header1) which is below the main header (see screenshots attached). I managed to get the banner to appear where it should by moving its position in the code. In the CSS I wrote position:fixed but it is creating a horizontal overflow which I cannot fix… I am not good with js but I can see that the sticky navigation is fixed on scroll only. I want the banner to behave the same way, always scrolling with the nav. I would greatly appreciate your help!

This is what I have header.liquid

This is what I have in the theme.scss.liquid file

.announcement-bar {
  text-align: center;
  position: fixed;
  top: 60px;
  width: 100%;
  z-index: 1;
}

[diego_ezfy]

@Elisaw

Hi there,

Have you checked this solution yet? It does exactly what you’re looking for plus much more. It was coded specifically for the Debut theme.

Let me know if you have any questions, I’ll be happy to help.

Thanks!

Kind regards,
Diego

[Elisaw]

@diego_ezfy thank you for the suggestion! I don’t need such a fancy solution though I mainly want to be able to code it myself

[ZaheedaT]

That’s more of a product to buy than it is a solution