Hide Navigation Bar on only one Page Brine family Template

Hey hi, 

i have seen on the forum the exact same question i'm posting right now but none of the answers work for me so here i am.

I’m trying to remove the navigation bar from a specific page on my maple inn template (brine family). I'v read that i should insert this code :

body#collection-5d58db8548099500014d80bb nav.Header-nav.Header-nav--primary {
   display: none;
}

But it doesn't work. Is there another way to do it or should i modify something in the code ?

Thx in advance for your help ! 

The code you have should work, but if you want me to take a look please share a link (and pwd if needed) to your website.

/* HIDE THE PRIMARY NAVS */
#collection-5d58db8548099500014d80bb .Header-nav--primary {
   display: none!important;
}

/* HIDE THE PRIMARY AND SECONDARY NAVS */
#collection-5d58db8548099500014d80bb .Header-nav {
   display: none!important;
}

Thank you so much to both of you !

Here are some more precisions about the way to do it :

1/ Each page has a specific collection number, so if you want to hide the navigation bar on a specific page, go on this page and find the page's collection number

2/ Replace the collection number in the following code by yours

#collection-5dcedd5eb702913cebc23c32 .Header-nav {
   display: none!important;
}

3/ Insert the code in DESIGN > CUSTOM CSS

4/ If you need to hide your navigation bar on several pages, follow the first 3 steps for each page. Your custom CSS window will look like this 

#collection-5dcd70869ea30043a7d107f7 .Header-nav {
   display: none!important;
}
#collection-5dcd7c15efe0ea08ad8167ac .Header-nav {
   display: none!important;
}
#collection-5dcedd5eb702913cebc23c32 .Header-nav {
   display: none!important;
}

👋🏻

Thanks All, this did the trick. First finding the page ID and next using the CSS code script.

@lu.diehl thanks for that, it helped! Any way to do the same for mobile? Links still appear on mobile but desktop is fine.

4 minutes ago, luisgonzalez said:

@lu.diehl thanks for that, it helped! Any way to do the same for mobile? Links still appear on mobile but desktop is fine.

Are you using a brine template family? Better yet, can you share the link to your site?

1 hour ago, lu.diehl said:

Are you using a brine template family? Better yet, can you share the link to your site?

@lu.diehl

I am! Here is the site as it is. Trying to do a multilingual site for this documentary. 

blurringman.org

@luisgonzalez- were you able to fix it? because I don't see any logo when viewing the site on desktop or mobile.

On 8/8/2020 at 7:51 AM, lu.diehl said:

@luisgonzalez- were you able to fix it? because I don't see any logo when viewing the site on desktop or mobile.

@lu.diehl hey! It wasn't the logo it was the mobile nav. On desktop for the Spanish site I want just the Spanish nav, and likewise for English. I was able to achieve this for the desktop version but not mobile. Any way to target that for the mobile nav?

On 8/10/2020 at 9:54 PM, luisgonzalez said:

@lu.diehl hey! It wasn't the logo it was the mobile nav. On desktop for the Spanish site I want just the Spanish nav, and likewise for English. I was able to achieve this for the desktop version but not mobile. Any way to target that for the mobile nav?

Can you share site url?

2 hours ago, tuanphan said:

Can you share site url?

@tuanphan 

Here is the site as it is. Trying to do a multilingual site for this documentary. 

blurringman.org 

main issue is wanting to separate the navs on mobile for each language, I was able to do that on desktop.

On 8/12/2020 at 11:07 PM, luisgonzalez said:

@tuanphan 

Here is the site as it is. Trying to do a multilingual site for this documentary. 

blurringman.org 

main issue is wanting to separate the navs on mobile for each language, I was able to do that on desktop.

Try these guides

• Business Plan or higher: bradgood.net/articles/multi-language-content-on-any-squarespace-template
• All Plans: https://beaverhero.com/squarespace-2-languages/

@tuanphan You've helped us so much with previous sites. I am also in the brine template and using the code below but it's not working for some reason. Can you take a look for us please? Thank you so much. 

The link for this page is below as well. 🙂

body#collection-609d2c7ba07aef53b13b14fa nav.Header-nav.Header-nav--primary {
   display: none;
}

https://pineapple-chartreuse-es5k.squarespace.com/linktree-page

19 hours ago, dovely said:

@tuanphan You've helped us so much with previous sites. I am also in the brine template and using the code below but it's not working for some reason. Can you take a look for us please? Thank you so much. 

The link for this page is below as well. 🙂

body#collection-609d2c7ba07aef53b13b14fa nav.Header-nav.Header-nav--primary {
   display: none;
}

https://pineapple-chartreuse-es5k.squarespace.com/linktree-page

Add to Design > Custom CSS

/* LinkTreePage - Hide nav */
body#collection-609d2c7ba07aef53b13b14fa nav.Header-nav {
    visibility: hidden;
}

@tuanphanThank you for your help. I tried the code you mentioned above and it hides the navigation on desktop but not the site logo and I see both the navigation and the logo on mobile. Is there a way to make it hidden there as well? Appreciate your time and help! 

13 hours ago, dovely said:

@tuanphanThank you for your help. I tried the code you mentioned above and it hides the navigation on desktop but not the site logo and I see both the navigation and the logo on mobile. Is there a way to make it hidden there as well? Appreciate your time and help! 

You want to hide header, or hide navigation?

To hide header, use this new code

/* LinkTreePage - Hide nav */
body#collection-609d2c7ba07aef53b13b14fa {
header.Header, .Mobile.loaded {
    display: none !important;
}
}

Then save & reload the site

@tuanphan You nailed it (sorry for the confusion on my part). LOOKS GREAT! Thank you 🙂

On 5/20/2021 at 3:58 AM, dovely said:

@tuanphan You nailed it (sorry for the confusion on my part). LOOKS GREAT! Thank you 🙂

Do you need to help with these issues?

Site URL – https://pineapple-chartreuse-es5k.squarespace.com/

1. (Mobile-Homepage) Reduce this white space?

2. (Mobile) remove black bar at the bottom of screen?

3. (Tablet-Homepage) Change to 2 items/row?

4. (Tablet-About) text looks long. Want to stacked text/image?

5. (Mobile-About) Move image to top of text?

6. (Mobile-About) Similar above

7. (Mobile-Services) Similar above

How could I go about hiding the logo on the home page on mobile/tablet views?

http://www.southernsunevents.com

PW:sse2020

12 hours ago, SouthernSunEvents said:

How could I go about hiding the logo on the home page on mobile/tablet views?

http://www.southernsunevents.com

PW:sse2020

Add to Design > Custom CSS

/* hide logo mobile homepage */
@media screen and (max-width:640px) {
body.homepage img.Mobile-bar-branding-logo {
    visibility: hidden;
}
}

Thank you everybody for your answers. They have been really useful. I am also using the Brine family and now I am trying to hide secondary navigation on mobile view but I can´t find the right way. Thank you!

On 9/25/2021 at 9:22 PM, Priscilapo said:

Thank you everybody for your answers. They have been really useful. I am also using the Brine family and now I am trying to hide secondary navigation on mobile view but I can´t find the right way. Thank you!

Hi,

What is your site url?