Jump to content

Hide header and footer

Go to solution Solved by Ziggy,

Recommended Posts

Hi, 

I use a code on this website to make a hamburger menu on desktop so I think thats the problem with following: 

I want  to hide the header and footer on a salespage and this code in the advanced tab doesnt work: <style> #header, #footer-sections { display: none!important;} </style>

Can anyone help me with a code to do so?

PW: Anahata12

Link to comment
  • Replies 9
  • Views 359
  • Created
  • Last Reply

Top Posters In This Topic

Can you share the website URL?

That code is for hiding the desktop header, you need a different selector for the mobile header.

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
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

Add this to the page header code injection:

<style>
  .header .header-announcement-bar-wrapper, #footer-sections { display:none !important;}
</style>

Or this if you want to hide the announcement bar as well:

<style>
  .header .header-announcement-bar-wrapper, #footer-sections, .sqs-announcement-bar { display:none !important;}
</style>

Let me know if that works for you.

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
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

Hmm, try these selectors instead:

.header-display-mobile
.header-display-desktop

and try adding !important as it seems to need that in my testing.

Edited by Ziggy

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
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

hi @Ziggy

So i tryed this: 

<style>
  .header-display-mobile
.header-display-desktop .header-announcement-bar-wrapper, #footer-sections, .sqs-announcement-bar { display:none !important;}
</style>

Too bad but it is not working 😢 ...  Do you think it's because of some other code inflicting?

 

Link to comment
44 minutes ago, Lian said:

Do you think it's because of some other code inflicting?

Very strange, this is not normally difficult to achieve, but it could be a code conflict with the header code you're using to force a mobile view, but it's hard to help you further without access the website in question.

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
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
  • Solution

You're welcome to try, I'll send you a DM.

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

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
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.