How do I reduce Flatiron template header height?

Site URL: https://www.andrewclaridge.net

Hi Everyone, I'm really hoping someone can help me.

I'm at my wits end trying to figure out how to reduce the height of the header on my site (Flatiron Template), it's too large and basically looks stupid. I've spent hours online, tried different CSS code from other forum questions and while some of it worked within squarespace it wouldn't work on the published site.

See screenshot of what I'm talking about. Note, my logo image file has zero space around it, so it's not the logo.  

I'd be so grateful if anyone could help me with this.

Thanks in advance!

https://www.andrewclaridge.net

See attached video. It appears the problem can be resolved by reducing logo padding AND container margin.

Try putting this code in DESIGN > Custom CSS:

#navigator .siteTitle {
    padding: 20px 0; /* Change 20px value if necessary */
}

#container{
  margin-top:100px !important; /* Change 100px value if necessary */
}

@ghemachandar That worked!! Thank you so much! Such a relief! 🙏

@ghemachandar I just checked on mobile and unfortunately the top of every page is now being cut off by the header (see screenshots) any idea how to fix this? Everything on desktop seems to be perfect.

Thank you so much for your help!

Thank you @ghemachandar that worked! Thank you so much for your help!

I don't suppose you know why the navigation menu on mobile doesn't show all the menu items? See screenshot. It only shows 3 menu items and you can't see the 4th (Contact). Any ideas? Sorry to keep asking but you're the only one that has been kind enough to help.

See attached image. When I first visited the site (or visited after clearing browser cache) the menu was working properly. It is only after multiple open-closes that the problem you cited appears.

I'm afraid, this could be some malfunction on the part of Squarespace and can only be resolved by them.

@ghemachandar Thanks for your help. I contacted squarespace support. Apparently it's a known issue. The workaround is to place a space in the tagline box under design>logo & title. This seems to have fixed it for now.

Thanks again!