Jump to content

How to hide specific header-nav-folder-items

Recommended Posts

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:

 

Screenshot (40).png

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

My testing result

 

Hope it can help you

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 5 months later...

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

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...

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!

Edited by El1z4b3th
Link to comment
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?

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
14 minutes ago, El1z4b3th said:

How would I go about changing the URL?

See this post:

 

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

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! 

Link to comment
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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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?

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.