Hide announcement bar on mobile menu?

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:

Right now, the mobile menu displays like this:

Any help is appreciated so much! Thank you!

Hi,

I don't see announcement bar. Can you enable it?

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 🙂

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;
}
}

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?

Thank you again for all your help! 🙏

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?

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;
}

Thank you so much @tuanphan!! Works perfectly!! I so appreciate your help!!

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

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;
}

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!