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

How to keep announcement bar fixed while scrolling?

Question

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? 

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.

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

-Brandon

 


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...