Jump to content

Different header navigation links for different pages

Recommended Posts

Site URL: https://www.spencerchow.com

Site URL: https://www.spencerchow.com

Hi I'm trying to create 1 website with 3 subfolders for 3 distinct photography businesses starting with the home/index page as a landing page with no header/footer navigation, but act as a gateway to each genre using 3 buttons/text links.    e.g:

mysite.com                            (Landing page)  Portrait site  Commercial site  Boudoir site

mysite.com/portraits          Gallery | Pricing | Blog | About | Contact (header navigation)

mysite.com/commercial    Work | About | Contact (header navigation)

mysite.com/boudoir            Portfolio | Sessions | FAQ | About | Contact (header navigation

The entire site style can be the same, but I would not want a person looking for family portraits to view a boudoir portfolio.  Also, pricing for a headshot session is easy, but commercial work has to be quoted by project basis, so I wouldn't want a pricing page to show up on the commercial site. I would need separate "about" and "contact" pages each using a code to prevent viewing pricing and "portfolios-galleries-of-work" in the other genres. My thoughts were to have one primary navigation with all the navigation links: 

Gallery | Work | Portfolio | Pricing | Sessions | FAQ | Blog | About | About | About | Contact |Contact | Contact

... then use code on specific pages to hide one or more of the above navigation links. I am on the business plan. Password is: 123

Edited by photospence
more specific
Link to comment
  • photospence changed the title to Different header navigation links for different pages
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Hi. Do/will you use Personal or Business Plan. Each plan will have a different solution.

Eg. Personal Plan, we will add all items to main navigation >> then use CSS to hide one or more nav links on specific pages.

Business Plan, change url format to /portraits/gallery, /portraits/pricing...

/commercial/work, /commercial/about

...

then use jQuery to solve problem.

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 7/9/2021 at 9:03 PM, tuanphan said:

Hi. Do/will you use Personal or Business Plan. Each plan will have a different solution.

Eg. Personal Plan, we will add all items to main navigation >> then use CSS to hide one or more nav links on specific pages.

Business Plan, change url format to /portraits/gallery, /portraits/pricing...

/commercial/work, /commercial/about

...

then use jQuery to solve problem.

@tuanphan

I am using a business plan.  My first attempt uses a messy 15 item header navigation where individual items are hidden with:

.header-nav-item:nth-of-type( x ), 

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

Where represents the xth item of the navigation menu. If you visit the pages boudoir/HOME, commercial/HOME, or portraits/HOME you can see that the code successfully hides the other pages in the navigation. But if you visit any other page you can see how messy the navigation looks.  Also, using this method I have to remember the page order and things can get confusing so much that I currently am numbering the pages for reference, as well as calling one page gallery and another portfolio.  I do not like this method, but it seems to work. 

I would prefer your solution of using URL's of   portraits/gallery, portraits/pricing... commercial/work, commercial/about.  Also if there was a way to target the link to hide for example:

href=portraits/gallery

That would be much better than the order of the navigation item. 

Screen Shot 2021-07-11 at 9.38.53 PM.png

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