shume Posted October 29, 2019 Share Posted October 29, 2019 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
tuanphan Posted October 29, 2019 Share Posted October 29, 2019 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. brandon 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
brandon Posted October 30, 2019 Share Posted October 30, 2019 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 michaelarnold, damonsun, paul2009 and 2 others 5 If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
Shume27 Posted November 4, 2019 Share Posted November 4, 2019 @brandon @tuanphan Is there a way not let users close out of the announcement bar? And get rid of the "X" Thanks! Sam Link to comment
brandon Posted November 4, 2019 Share Posted November 4, 2019 Yes, there is: .sqs-announcement-bar-close { display: none; } -Brandon tuanphan 1 If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' (top-left) Link to comment
WebRefresh Posted March 23, 2020 Share Posted March 23, 2020 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 Founder of the WebRefresh SEO Agency, specialising in E-commerce SEO and SEO Migrations. Link to comment
kbrickley Posted March 23, 2020 Share Posted March 23, 2020 (edited) 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? Edited March 23, 2020 by kbrickley Link to comment
tuanphan Posted March 27, 2020 Share Posted March 27, 2020 On 3/24/2020 at 3:24 AM, kbrickley said: Hi all, If you share link to your site, I can take a look Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
theresa.southern Posted July 6, 2020 Share Posted July 6, 2020 Any way to move the announcement bar to just below the navigation? Link to comment
tuanphan Posted July 6, 2020 Share Posted July 6, 2020 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. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message 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
TheHomieHelena Posted January 13, 2021 Share Posted January 13, 2021 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
tuanphan Posted January 16, 2021 Share Posted January 16, 2021 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. Or send to forum message 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment