Jump to content

How to have only nav hidden from a single page (keeping logo and the rest of the header)

Recommended Posts

Site URL: https://andrewfreedman.com

Hello,

 

I am currently working on the 404 page of my site and I would like to hide just the navigation on the 404 page and keep it on the main page. I tried a few different pieces of code but the closest I have seen to get is just hiding the entire header. I need this because I realized my menu is made up of anchor links so they are useless on the 404 page. Any help would be greatly appreciated!

 

Best,

Andrew Freedman

Link to comment
<style> 
  .header-nav {display: none!important; }
 .header-burger {display: none!important; }
</style>

You’ll paste this code into your Advanced Page Settings for the particular page you want to target to remove the navigation. The first class removes desktop nav, the second removes the mobile hamburger icon.

Link to comment

Hello Andrew,

It's actually fairly simple to setup and you won't need to worry about hiding the entire header or having it effect all other pages.

To do this, start by creating an un-linked page and fill it will whatever content you want to display to viewers for your 404 Page. After you've completed styling or adding the 404 Page content, save your changes.

In the "Advanced Settings" for the page, use the following code in the page in Code Injection field:

<style> 
  .header-nav {display: none!important; }
 .header-burger {display: none!important; }
</style>

Navigate to Home -> Design -> 404 Page.  You'll have an option to select the page we created earlier to be your 404 Page. Select it, save, and boom! You're all set.

Hope this helps,

-Dan

Link to comment

Yes! You can follow the general steps in this post but use the code provided above. 

 

Link to comment

@AndrewFreedman you can workaround using Custom CSS instead of code injection using the steps in the blog post I linked to above. You'll just need to target the collectionID.

Link to comment

@christyprice So I tried doing the code below but I can't figure out how to stop getting a Syntax error

/* 404Page */
#collection-60c04a57ab55910fd8381492 {
<style> 
  .header-nav {display: none!important; }
 .header-burger {display: none!important; }
</style>}

 

Would you know how I should change the code so it works and its just my header without the nav?

Link to comment

@AndrewFreedman

Try the following.

<style> 

  /* 404Page */
  
  #collection-60c04a57ab55910fd8381492 .header-burger,
  #collection-60c04a57ab55910fd8381492 .header-nav
  
    {
    
      display : none !important;
      
      }
      
  </style>

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

@AndrewFreedman

Since the code you posted had a style tag in it I assumed the CSS was for another place other than Custom CSS.

To make the code work there just remove the first and last line. <style> and </style>.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.