Jump to content

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

Recommended Posts

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





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. 

Edited by photospence
add more info
Link to comment
  • Replies 5
  • Views 309
  • Created
  • Last Reply

Top Posters In This Topic

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. 

Screen Shot 2022-09-04 at 12.37.16 PM.png

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.

Edited by photospence
Link to comment

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.


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


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.

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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 


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



And does this work for mobile?

Edited by photospence
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.