Jump to content

Hide announcement bar on mobile menu?

Recommended Posts

Site URL: http://www.alexandra-lyon.com

Hi! Seeking help on this, is it possible to either hide the announcement bar when visitors are accessing the mobile menu or have the mobile menu cover the announcement bar completely? I still want the announcement bar visible on mobile just not on the menu. I'd like to achieve the effect below:

539950959_ScreenShot2021-10-22at12_29_28PM.png.2d021f3b3f6a4d3e3ac16d89f2aae569.png1651264553_ScreenShot2021-10-22at12_37_15PM.png.493b18095ca20c8f447671366d489007.png

Right now, the mobile menu displays like this:

919122691_ScreenShot2021-10-22at12_29.10PM1.png.a9319f04860950273d68428273833ac7.png

Any help is appreciated so much! Thank you!

Edited by GretchenElizabeth
Link to comment
On 10/26/2021 at 3:34 AM, GretchenElizabeth said:

Hi, it is disabled on the first page but shows up throughout the rest of the site like so: https://www.alexandra-lyon.com/course

 

Thank you for your response 🙂

Add to Design > Custom CSS

/* Hide announcement bar on mobile only */
@media screen and (max-width:767px) {
div.sqs-announcement-bar-dropzone {
    display: none !important;
}
}

 

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
On 10/28/2021 at 1:33 PM, GretchenElizabeth said:

Thank you @tuanphan! I really appreciate the help. Is it possible to have the announcement bar show up like normal when browsing on mobile but be disabled or covered up only when the menu is opened, like below?

365544356_ScreenShot2021-10-22at12_37_15PM.png.bda2644be61692d4746cc69390ca9498.png1598233296_ScreenShot2021-10-22at12_29_28PM.png.ae594fb95b1950d6f268c50a37dcfbb4.png

Thank you again for all your help! 🙏

 

Add to Design > Custom CSS

/* hide announcement bar when overlay menu is open */
body.header--menu-open .sqs-announcement-bar-dropzone {
    display: none;
}

 

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
  • 1 year later...
On 4/16/2023 at 8:47 PM, krztff said:

@tuanphan do you have a solution to remove the mobile information bar when the overlay menu is opened? Thanks in advance!

Add to Design > Custom CSS. If it doesn't work, please share link to your site

body.header--menu-open [class*="sqs-mobile-info-bar"] {
	display: none !important;
}

 

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
  • 3 weeks later...
On 4/19/2023 at 10:41 AM, tuanphan said:

Add to Design > Custom CSS. If it doesn't work, please share link to your site

body.header--menu-open [class*="sqs-mobile-info-bar"] {
	display: none !important;
}

 

That worked perfectly. Thank you so much!

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.