Change main navigation on one page.

Site URL: https://credhub.com

Hello. Is it possible to change the main navigation links on one page? We're in the 7.0 – Brine family Sonora template. (see attached screenshots - live page with multiple links...layout of one page in site with two links) Thank you. - S.

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

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.

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 ?

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?

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

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

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

12 hours ago, tuanphan said:

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

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

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