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 post
  • Answers 9
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 m

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

Yes, there is: .sqs-announcement-bar-close { display: none; } -Brandon

Posted Images

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

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- I came back. Will answer soon.

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)

Link to post
  • 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 post
  • 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 post

Create an account or sign in to comment

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


×
×
  • Create New...