How to keep announcement bar fixed while scrolling?

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? 

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.

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

@brandon @tuanphan

Is there a way not let users close out of the announcement bar? 

And get rid of the "X" 

Thanks! 

Sam

Yes, there is:

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

-Brandon

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

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?

On 3/24/2020 at 3:24 AM, kbrickley said:

Hi all,

 

If you share link to your site, I can take a look

Any way to move the announcement bar to just below the navigation?

6 hours ago, theresa.southern said:

Any way to move the announcement bar to just below the navigation?

Can you share site url? We can check easier.

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 

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?