Jump to content

Is it possible to hide header on desktop/tablet, but show on mobile?

Recommended Posts

Basically the designer wanted to have a navigation layout that wasn't a default layout option provided in 7.1.

I am hoping to disable the navigation on desktop + tablet, but show the default burger menu on mobile. 

I have tried several versions of media queries to hide the header, but they keep seeming to be ignored. I can only get the header to hide, sitewide, not specific to browser width. 

I'm posting the media queries in the Custom CSS editor. 

Any ideas?

P: spinach2022



/* ------------ MOBILE SPECIFIC QUERIES --------------------- */

@media screen only and (max-width: 640px) {



/* ------------ TABLET SPECIFIC QUERIES --------------------- */

@media screen only and (min-width: 641px) and (max-width:950px) {
/* Hide Navigation */

 #header {
       display: none !important;

/* ------------ DESKTOP SPECIFIC QUERIES --------------------- */

@media screen only and (min-width: 951px) {
/* Hide Navigation */

  #header {
       display: none !important;



Edited by LSwioklo
forgot to add URL
Link to comment
  • Replies 2
  • Views 923
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Try this instead:

@media only screen and (min-width: 641px) { 
  .header {
     display: none;

.header instead of #header.

Position of only in the media query wasn't correct.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.