How to hide specific header-nav-folder-items

Site URL: https://pte.squarespace.com/

Hi! 

I am trying to hide the redundant navigation items that appear in my drop down menus. Specifically, "ABOUT" "CAREERS" & "CONTACT". 

I found this thread below, which is exactly what I am trying to do, but after customizing the CSS to my site, it didn't work out:

17 hours ago, pbueno24 said:

Site URL: https://pte.squarespace.com/

Hi! 

I am trying to hide the redundant navigation items that appear in my drop down menus. Specifically, "ABOUT" "CAREERS" & "CONTACT". 

I found this thread below, which is exactly what I am trying to do, but after customizing the CSS to my site, it didn't work out:

 

You can try adding to Home > Design > Custom Css

.header-nav-item--folder
  .header-nav-folder-content
  .header-nav-folder-item:first-child {
  display: none;
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

My testing result

Hope it can help you

Thanks again @bangank36

This works great on desktop, however they are still showing up on mobile. Do you know how to fix this?

.header-menu-nav-folder-content
.container.header-menu-nav-item:nth-child(2) {
    display: none;
}
 

^ this seems to be really close, but it is hiding my "work" page as well, which needs to stay visible.

23 hours ago, pbueno24 said:

.header-menu-nav-folder-content
.container.header-menu-nav-item:nth-child(2) {
    display: none;
}
 

^ this seems to be really close, but it is hiding my "work" page as well, which needs to stay visible.

Try this new code

header#header [href="/about"], header#header [href="/contact"] {
    display: none;
}

Thanks again ya'll!

Hi @tuanphan

I have created a page dedicated to contact and I would like the contact button in the header to link to it.

How can I remove the redundant "contact" item in the menu?

If I try your code  

header#header [href="/contact"] {
    display: none;
}

it removes the menu item but also the button.

I would love to have the button remaining on my website (and remove only the "contact" item in the navigation bar)

here is my website

https://accordion-dogfish-8dex.squarespace.com/config/design/custom-css

password: thanksalot

By advance thanks,

Sophie

On 5/2/2022 at 4:38 PM, Phiso said:

Hi @tuanphan

I have created a page dedicated to contact and I would like the contact button in the header to link to it.

How can I remove the redundant "contact" item in the menu?

If I try your code  

header#header [href="/contact"] {
    display: none;
}

it removes the menu item but also the button.

I would love to have the button remaining on my website (and remove only the "contact" item in the navigation bar)

here is my website

https://accordion-dogfish-8dex.squarespace.com/config/design/custom-css

password: thanksalot

 

 

By advance thanks,

Sophie

Incorrect password. Can you check it again?

Hi @tuanphan

Sorry for the delay and the wrong password (I have been travelling last week).

Website address is: 

https://accordion-dogfish-8dex.squarespace.com

or https://www.sophierevillard.com

password is: startmakingsense

By advance thanks for your help!

On 5/10/2022 at 4:36 PM, Phiso said:

Hi @tuanphan

Sorry for the delay and the wrong password (I have been travelling last week).

Website address is: 

https://accordion-dogfish-8dex.squarespace.com

or https://www.sophierevillard.com

password is: startmakingsense

 

By advance thanks for your help!

Hi,

It looks like you solved? I don't see any contact item on header now

Hi @tuanphan

Yes I did! Thanks a million for looking at it!

With all my appreciation,

Sophie

Hi all, 

I need some help hiding navigation items on specific pages only. 

I'm trying to create two separate sections to my site 'supply' and 'retail'. To create this, I need some navigation items hidden for each side:

Supply - 'Shop' navigation item hidden 

Retail - 'Services' navigation item hidden 

Is there a code I can use to make this work? 

Site: meletius-roasters.squarespace.com 

Password - Meletius22 

Many thanks in advance!

18 hours ago, El1z4b3th said:

Hi all, 

I need some help hiding navigation items on specific pages only. 

I'm trying to create two separate sections to my site 'supply' and 'retail'. To create this, I need some navigation items hidden for each side:

Supply - 'Shop' navigation item hidden 

Retail - 'Services' navigation item hidden 

Is there a code I can use to make this work? 

Site: meletius-roasters.squarespace.com 

Password - Meletius22 

Many thanks in advance!

Actually if you use Business Plan or higher, we can change page url, use this format: /supply/about, /supply/shop,.../retail/services, retail/about

Then use script code, to identify if users on a page where the url is /retail/.. will hide the items that the url contains /supply/..

What do you think?

@tuanphan I am using the business plan so sounds like this would do the trick. How would I go about changing the URL?

14 minutes ago, El1z4b3th said:

How would I go about changing the URL?

See this post:

Thanks @tuanphan and @paul2009 

I tried:

<script>
if (window.location.href.indexOf("retail") > -1) {
document.getElementsByClassName('header-nav-folder-title.preScale.scaleIn').style.display = 'none';
}
</script>

I have also changed the URL slug into retail so that the if statement is true. I have tested the class with CSS so that the styling works. Would you mind having a look at it and see if I did anything wrong?

Also is there a way of changing html class on specific elements in header with squarespace? Just to provide better coding.

Thank you! 

22 hours ago, El1z4b3th said:

 

I tried:

<script>
if (window.location.href.indexOf("retail") > -1) {
document.getElementsByClassName('header-nav-folder-title.preScale.scaleIn').style.display = 'none';
}
</script>

I have also changed the URL slug into retail so that the if statement is true. I have tested the class with CSS so that the styling works. Would you mind having a look at it and see if I did anything wrong?

Also is there a way of changing html class on specific elements in header with squarespace? Just to provide better coding.

Thank you! 

I think you should use this (remove .preScale.scaleIn)

<script>
if (window.location.href.indexOf("retail") > -1) {
document.getElementsByClassName('header-nav-folder-title').style.display = 'none';
}
</script>

Hi @tuanphan many thanks however it didn't work unfortunately!

I have tested on both the retail subpage on both the actual website with the the URL-slug “/retail-home” and the squarespace developer tool but it still hasn't pulled through. 

However, on the “supply” situation since “shop” does not contain subpages it was categorized with the same class as “coffee” with “class = “preScale .scaleIn””  which is why I though if we could change the class of header elements separately that might do the trick?

On 5/27/2022 at 9:05 PM, El1z4b3th said:

Hi @tuanphan many thanks however it didn't work unfortunately!

I have tested on both the retail subpage on both the actual website with the the URL-slug “/retail-home” and the squarespace developer tool but it still hasn't pulled through. 

However, on the “supply” situation since “shop” does not contain subpages it was categorized with the same class as “coffee” with “class = “preScale .scaleIn””  which is why I though if we could change the class of header elements separately that might do the trick?

What is your site url?

URL: meletius-roasters.squarespace.com

Password: Meletius22

Thanks @tuanphan

On 5/29/2022 at 4:14 PM, El1z4b3th said:

URL: meletius-roasters.squarespace.com

Password: Meletius22

Thanks @tuanphan

On 5/24/2022 at 1:15 PM, tuanphan said:

Actually if you use Business Plan or higher, we can change page url, use this format: /supply/about, /supply/shop,.../retail/services, retail/about

Then use script code, to identify if users on a page where the url is /retail/.. will hide the items that the url contains /supply/..

What do you think?

 

Looks like I've come a long way in the direction I intend to guide here. With your code, what is that code for? And which pages are not working?