Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


Question

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

15 answers to this question

Recommended Posts

  • 0
<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
  • 0

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
  • 0

@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
  • 0

@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
  • 0

@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 best , and see my profile. Thanks for your support!

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