Displaying different navigation for individual pages. Can't find old page header code injection.

Site URL: http://www.Spencerchow.com

A while back, I was using different navigation links on separate pages of my website by using page header code injection. It has been over a year and I wanted to change and update my entire site but I don't see the old code where I think I used to have it... I think.   Pages->  (Specific page's GEAR ICON) -> Advanced ->  Page Header Code Injection.  The old method was listing ALL the pages in the Main Navigation, and on each page, use code hide individual items in the navigation bar. I found an old screen shot of the code but I no longer see any of this previous code under the Page Header Code injection. Now I'm not sure how to change the navigation of my website anymore.  What would have happened to my code? is there another solution? This old method was suggested by forum member. 

ww.spencerchow.com  (website private for now) 

PW: 123

EDIT: 

I've been staring at this for a few hours, but I'm not entirely sure the above is correct either... I had someone help with the code. So this could be something else... It seems like if I add a new page in the main navigation side panel, It doesn't affect what actually shows in the navigation bar of my site. I can move around specific pages already created, but I can't add a page int he main navigation side panel that will display on the site.   Totally confused now. 

Can you describe your first problem from scratch? We can come up with another solution, making it easier for you to manage your code, when adding a new page.

Hi Tuan, I think you might have been the person who helped me last time.  I want to copy the idea used by the clothing company www.gap.com if you look at their website at the top you can go to Gap, Old Navy, Banana Republic but once you are in each company's website, the main navigation is specific to that brand.  **Basically, I want different navigation for different pages. 

At the moment the website looks like this:

spencerchow.com                           (landing page, no navigation bar )

spencerchow.com/boudoir          (Navigation: Portfolio, Sessions, FAQ, About, Contact)

spencerchow.com/commercial  (Navigation: Work, About, Contact) 

spencerchow.com/education      (Navigation: Articles, Workshops, Store)

My main navigation looks like this. 

I THINK??? NOT SURE...  that I used page header code injection like in the first post to hide individual navigation items. Again I am not sure. But I can no longer find any code that looks like the above example

.header-nav-item.nth-of-type( )

So now I am unable to change the navigation links. But also when I add a brand new page either to main navigation or not linked, the brand new page has no navigation bar at all.

You can consider this approach

Change all page urls, use this structure

• boudoir/...
• commercial/..
• education/...

When users are on a page whose url contains these words, we will add a tag name to nav item, eg: boudoir, commercial, education...

Then to hide then to hide items on any page we can use code like this.

<style>

div.header-nav-item:not(.boudoir) {display: none;}

</style>

This code means that when the user is on a page (the page we will insert the code), and the nav items does not contain the tag name: boudoir... then we will hide it.

The only problem here is, does changing the url generate some 404 links on your website?

What do you think about this idea? If you like it, you can duplicate the current page, delete the codes you used, we can try there first.

I figured out where the missing code went. So that's solved.

The site structure is already

• .com/boudoir/
• .com/commercial/
• .com/education/

So there are no 404 errors. Where do you insert 

<style>

div.header-nav-item:not(.boudoir) {display: none;}

</style>

And does this work for mobile?

You fixed it or still need help?