Jump to content

How to keep announcement bar fixed while scrolling?

Recommended Posts

Hi,

How do you keep the announcement bar fixed while scrolling.  There seems to be old forum questions along these lines and have all been deleted!

Is there CSS code I can add?

I tried the below, but it didn't work!

.sqs-announcement-bar { position: fixed; top: 0; width: 100%; }

Thanks! 

 

Template: Hayden

Bonus question:

And if you know how to remove an underline from a link in announcement bar? 

Link to comment
  • Replies 11
  • Views 6.4k
  • Created
  • Last Reply

Add to Home > Design > Custom CSS

.sqs-announcement-bar-dropzone {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
}
/* remove underline link */
.sqs-announcement-bar-dropzone a {
    text-decoration: none;
	border-bottom: none;
	background-image: none;
}

If it doesn't work, please share site url to check.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Something to consider on the Hayden template:

  • Using a fixed announcement bar may cover up the navigation undesirably when scrolled to the top of the site.
  • Using a fixed announcement bar may cover up the navigation when the on-scrolled navigation shows up.

To deal with these, you could use "sticky" instead of "fixed" and hide the navigation when the user is scrolled down the page. To do that, use the following CSS:

.sqs-announcement-bar-dropzone {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10001;
}
.show-on-scroll-wrapper.show {
    display: none;
}

-Brandon

 

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Link to comment
  • 4 months later...

Hi there,

When adding the CSS to keep the announcement bar fixed while scrolling, you may notice that it covers up the mobile navigation when active. To prevent this from happening, you may want to set the announcement bar to not display when the mobile nav is active. To do so, you can use the following CSS:

/* remove announcement bar on mobile when mobile navigation is active */
@media only screen and (max-width: 640px)
{.tweak-mobile-overlay-slide-origin-left.is-mobile-overlay-active .sqs-announcement-bar{ display: none; }
}

I hope this helps!

-WebRefresh

Founder of the WebRefresh SEO Agency, specialising in E-commerce SEO and SEO Migrations.

Link to comment

Hi all,

I'm looking for the same answers as the original poster. So far, the following code has worked for me:

.sqs-announcement-bar-dropzone {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10001;
}

.sqs-announcement-bar-close {
    display: none;
}

The problem is, the announcement bar is still covering up my navigation. Any other advice?

 

Announcement Bar.PNG

Link to comment
  • 3 months later...
  • 6 months later...

Hello! I added an announcement bar to my website thehomiehelena.com but it doesn't stick to the top and it made the top of my layout look off. Here is the code I used

}
.Header {
    position: fixed;
    z-index: 1000;
    width: 100%;
    top: 60px;
}
.sqs-announcement-bar-dropzone {
    top: 0.5;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 999;
}
span.sqs-announcement-bar-close {
}

 

password: zur12018 

Link to comment
On 1/14/2021 at 2:25 AM, TheHomieHelena said:

Hello! I added an announcement bar to my website thehomiehelena.com but it doesn't stick to the top and it made the top of my layout look off. Here is the code I used

}
.Header {
    position: fixed;
    z-index: 1000;
    width: 100%;
    top: 60px;
}
.sqs-announcement-bar-dropzone {
    top: 0.5;
    position: fixed;
    left: 0;
    right: 0;
    z-index: 999;
}
span.sqs-announcement-bar-close {
}

 

password: zur12018 

Incorrect password. Can you check again?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.