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

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

<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.

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

I don't have a premium or business account, is it possible to do this without the code injection?

Is this possible to do with the basic plan?

@AndrewFreedman

It appears you solved the issue?

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

 

@christyprice this looks like this also required the premium plans, or can I do this with a basic account?

@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.

@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?

@AndrewFreedman

Try the following.

<style> 

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

Let us know how it goes.

Hi @creedon unfortunately that also gives me a syntax error when I copy and paste it into my custom CSS

@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>.

@creedon When I do that I get an error that one of the opening or closing brackets is missing but I can't seem to figure out which one. Would you mind just pasting the code I need please? 

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

Ah perfect, thank you so much!