Jump to content

Change main navigation on one page.

Recommended Posts

We can use custom css to do this

- Note your page url on the nav, it's the URL SLUG when you edit one page

- Add this snippet to the Design->Custom Css to hide the page you one on nav bar, Example: "products" page, it has url slug /products

.Header-nav-item[href*=products],
.Mobile-overlay-nav-item[href*=products] {
  display: none;
}

- On Pages -> Gear Icon next to the page -> Advanced, Example: Products page

We will hide all nav item except the /about and /products

.Header-nav-item, .Mobile-overlay-nav-item {
display: none;
}
.Header-nav-item[href*=products],
.Mobile-overlay-nav-item[href*=products] {
  display: inline-block;
}
.Header-nav-item[href*=about],
.Mobile-overlay-nav-item[href*=about] {
  display: inline-block;
}

Outcome

image.png.1a0e7db882507266d25bfcd7880c3f1b.png

image.thumb.png.cb28d85d037ae1d10f14c5eba05bf5b1.png

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

Hello.

Thank you for your help. I tried to hide the main nav on 'lead" page with your code. Unfortunately it didn't function. (See attached screen shot). I did successfully target the nav with this code:

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

I'll need to try and amend that code to also include mobile.

The next step, either using the collection number or your code, I need to replace the hidden navigation with a new link, "BECOME A REFERRAL AGENT" that will simply scroll the page down to the referral form. 

The Lead Referral page can be seen at https://credhub.com/lead

Thank you. - S.

Screenshot 2020-11-17 at 11.17.02.png

Screenshot 2020-11-17 at 11.14.07.png

Link to comment

You should need hide the entire nav bar, it will complete hide the nav item and you can't enable it, I went to your lead page and still not see the button BECOME A REFERRAL AGENT any where, have you add it ?

image.png.d005212ccf342de02ec26c001f4cb032.png

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
22 minutes ago, smmaloeny said:

Hello. No I haven't added the BECOME A REFERRAL AGENT link. I'm not sure how to make that happen. The question is, can it be done by using body#collection-5faa8ab8447c973dee2ffecc?

yes

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
  • 1 year later...

@bangank36 how would this work for mobile?

I am trying to solve this issue:

On desktop I have anchor links in the navigation so company#awards and company#responsibility and on mobile I am having a new mobile page show up company-mobile and when the navigation item is clicked it is going to company-mobile page rather then company-mobile#awards and company-mobile#responsibility. 

The site is built on 7.1 and I will send you a message with the link to the site so you can see what I am trying to do.

Thanks for any help you can provide with this.

Link to comment

@JustinSeimits You can add all anchor links to navigation, then we can use code to hide some items on desktop/hide some on mobile

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 12/18/2021 at 4:32 AM, JustinSeimits said:

This would work, what is the code to hide the items, I can edit the code most likely to fit the links being hidden. 

You need to add first, we can check code easier. If your site is live, you can duplicate the site & add there

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.