Jump to content

Move Announcement Bar to top on mobile

Recommended Posts

Add to Home > Design > Custom CSS

@media screen and (max-width:640px) {
.tweak-mobile-bar-top-fixed .Mobile-bar--top {
    top: 38px;
}
.sqs-announcement-bar-dropzone {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 8 months later...

This code works to move the announcement bar to the top of the page on mobile but now it's covering the logo and menu. Any ideas how to position the announcement bar at the top of the page without obscuring the logo and menu?

 

 

Thanks!

Link to comment
3 hours ago, Beste said:

This code works to move the announcement bar to the top of the page on mobile but now it's covering the logo and menu. Any ideas how to position the announcement bar at the top of the page without obscuring the logo and menu?

 

 

Thanks!

Can you share link to your site?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...

I'm having the same problem as Beste. The code works, but it's covering the logo and menu. The code is in custom CSS. I've attached two photos, one with the announcement bar and one without. 

I'm using the announcement bar only on this test home page for now: curtains2u.co.nz/home-new

// Home page - Move Announcement Bar to top of mobile//
@media screen and (max-width:640px) {
.tweak-mobile-bar-top-fixed .Mobile-bar--top {
    top: 38px;
  
}
.sqs-announcement-bar-dropzone {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}
}

 

Screen Shot 2021-09-29 at 3.28.51 PM.png

Screen Shot 2021-09-29 at 3.29.07 PM.png

Link to comment
On 9/29/2021 at 9:39 AM, S74 said:

I'm having the same problem as Beste. The code works, but it's covering the logo and menu. The code is in custom CSS. I've attached two photos, one with the announcement bar and one without. 

I'm using the announcement bar only on this test home page for now: curtains2u.co.nz/home-new

// Home page - Move Announcement Bar to top of mobile//
@media screen and (max-width:640px) {
.tweak-mobile-bar-top-fixed .Mobile-bar--top {
    top: 38px;
  
}
.sqs-announcement-bar-dropzone {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}
}

 

Screen Shot 2021-09-29 at 3.28.51 PM.png

Screen Shot 2021-09-29 at 3.29.07 PM.png

Add to Design > Custom CSS

/* Fix announcement bar cover logo on mobile */
.Mobile-bar.Mobile-bar--top {
    top: 55px !important;
    position: relative;
    z-index: 9999;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 6 months later...

Hello! I used both codes to send the bar to the top of the page, and then to make sure it wasn't covering the logo and navigation. Unfortunately, now, it's almost like my navigation is below the navigation bar. You click on the little 3 lines and then they stay infront of the navigation text so you can't actually navigate to a different page. Again, this issue is only on mobile. My site is www.mustardbeetle.com

Link to comment
On 4/14/2022 at 1:34 PM, mustardbeetle said:

Hello! I used both codes to send the bar to the top of the page, and then to make sure it wasn't covering the logo and navigation. Unfortunately, now, it's almost like my navigation is below the navigation bar. You click on the little 3 lines and then they stay infront of the navigation text so you can't actually navigate to a different page. Again, this issue is only on mobile. My site is www.mustardbeetle.com

Don't remove any code in your current code

Add to Design > Custom CSS

/* Mobile Announcement Bar */
@media screen and (max-width:767px) {
.sqs-announcement-bar-dropzone {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
}
div.Mobile-bar {
    margin-top: 50px;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.