Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to keep announcement bar fixed while scrolling?



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%; }



Template: Hayden

Bonus question:

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

Share this post

Link to post

4 answers to this question

Recommended Posts

  • 0

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.

 Send me a message if you have any questions.

OFF forum from Jan 16 - Jan 31.

Share this post

Link to post
  • 0

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;



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

Share this post

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...