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?


shume

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? 

Link to comment

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 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)

Link to comment
  • 0

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

Link to comment
  • 0

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

Edited by kbrickley
Link to comment
  • 0

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...