Jump to content

Make mobile menu bar smaller / decrease height

Go to solution Solved by tuanphan,

Recommended Posts

Site URL: https://bumblebee-oboe-2bhw.squarespace.com/

Hello, is there a way to decrease the height of the mobile menu bar? I'd like it to have smaller margins/padding on the top and bottom so that it takes up less vertical space on the screen. Please see the attached screenshot with my markup/notation in pink. 💙

I've tried adjusting this through custom CSS but have not yet found a solution.

Thanks so much for your help! I would be so grateful to solve this.

unnamed.jpg

Meghan Mills
Websites, Design + Tech Help for Small Businesses
https://meghanmills.com

Link to comment
  • Solution

Add to Design > Custom CSS

@media screen and (max-width:767px) {
div.header-announcement-bar-wrapper {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}}

 

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

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
  • 1 year later...
On 9/21/2023 at 6:34 AM, 8ritt said:

@tuanphan I tried this code and didn't seem to have any luck.  Is this for 7.1?  I am wanting to achieve the same thing but use Brine 7.0.  Thanks 🙂

What is your site url? We can give code easier

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

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

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.