Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Hide announcement bar on mobile menu?


Question

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

6 answers to this question

Recommended Posts

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

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

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

Create an account or sign in to comment

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

×
×
  • Create New...