Jump to content

remove header from mobile only and stop video from cropping

Recommended Posts

hello.   site - https://icosahedron-rust-7ftd.squarespace.com

I would like to:

1. Remove header on mobile only so that the logo and hamburger are hidden completely.  Video should be the only thing show on top. 

2. Stop video from cropping. 

If anyone can help it would be greatly appreciated.  I have tried some snippets in DESIGN --> Custom CSS without luck. 

Edited by FPY
sent too early.
Link to comment
  • Replies 1
  • Views 201
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

You can remove the header on mobile with the code below. Just add it to your custom css. 

Your video is setup as a background video so it's designed to fill the entire space, which results in the cropping. While it will still be cropped a little, you should be able to click the phone icon in the top right corner of your website to edit the mobile view and increase the size of your grid so the video presents itself better. I've included a screenshot of the icon I am talking about if you're not familiar with it.

@media screen and (max-width:799px) {
    .header-announcement-bar-wrapper {
        display: none !important;



Lead Developer at [Hook Creative][1] in Springfield, MO. [1]: http://www.hookcreative.co

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.