Announcement bar overlapping menu on mobile

12 hours ago, RichardR said:

Hi everyone, 

I have added an announcement bar and I just can't figure out how to stop it overlapping the menu on the mobile. I'd be grateful for help with 3 things: 

1. Making announcement bar disappear when clicking on menu. 
2. Reduce text wrapping on mobile, so I can get announcement text all on one line. 
3. Make bar height smaller, if text on one line. 

Website: https://www.probation-institute.org

Many thanks,

Richard

Add these code on Custom CSS panel in Website > Utilities > Website Tools > Custom CSS.

@media only screen and (max-width: 767px) {
    .sqs-announcement-bar-close {
        width: 2em !important;
        height: 2em !important;
    }
    .sqs-announcement-bar-close:after {
        line-height: 2em !important;
    }
    .sqs-announcement-bar-text{
        padding: .4em 2em !important;
    }
    .sqs-announcement-bar-text p {
        font-size: 14px !important;
    }
    .is-mobile-overlay-active .sqs-announcement-bar-dropzone {
        display: none !important;
    }
}