Jump to content

Change items in navigation based on URL path

Recommended Posts

URL: https://heartology-backend.squarespace.com/ Password: Heartology

My client has three distinct types of audiences and wants different experiences for each. The navigation items need to change depending on which kind of customer is viewing the site.

I’m using code to hide or unhide nth child nav items on desktop and mobile, but it is extremely clunky and sometimes breaks formatting on other parts of the pages. I wonder whether I can achieve a solution using a method similar to what others have used for multi-lingual sites like this instructional page or this forum question.

The mock-up landing page looks like this:

image.png.5c14b181fdc87bd06dbd232236b9e53e.png

Each audience should see different headers in the navigation. I used these paths and would like to show/hide the correct items according to the audience.

/seniors

/students

/physicians

Tagging @tuanphan @paul2009  and @creedon as I can see you’ve addressed similar questions in other posts, though I can't find the exact answer I'm looking for. Thanks in advance for any ideas you have!

Link to comment

The Brad Good code is an excellent launch point to get to where you want to go.

Please see the following.

If you think it will work for you respond back here.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

I agree, Brad’s guide (that you linked in your question) should provide a working solution, using ‘seniors’ instead of ‘en’ and so on. I wouldn’t recommend using ‘nth’ selectors for a production site as it will be difficult to maintain. 

About me: I'm Paul. A SQSP User for 18 yrs, I've been a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee fuels my work.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment
10 hours ago, creedon said:

The Brad Good code is an excellent launch point to get to where you want to go.

Please see the following.

If you think it will work for you respond back here.

Thanks so much for responding @creedon and @paul2009! Yes, I agree the Brad Good code is the best solution. My coding knowledge stops with CSS, so I'm not sure how to make it work for me. Can you help? 

Link to comment
Quote

but it's not showing in the senior page nav.

You need to remove, make a copy somewhere or comment out your custom CSS that is hiding things.

    <style>
      .header-nav-item:nth-child( 3 ) {
        display : none;
      }

      .header-nav-item:nth-child( 4 ) {
        display : none;
      }

      .header-nav-item:nth-child( 5 ) {
        display : none;
      }

      .header-nav-item:nth-child( 6 ) {
        display : none;
      }

      .header-nav-item:nth-child( 7) {
        display : none;
      }
    </style>

 

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
21 hours ago, creedon said:

You need to remove, make a copy somewhere or comment out your custom CSS that is hiding things.

    <style>
      .header-nav-item:nth-child( 3 ) {
        display : none;
      }

      .header-nav-item:nth-child( 4 ) {
        display : none;
      }

      .header-nav-item:nth-child( 5 ) {
        display : none;
      }

      .header-nav-item:nth-child( 6 ) {
        display : none;
      }

      .header-nav-item:nth-child( 7) {
        display : none;
      }
    </style>

 

I totally forgot I had injected that code into the header of my pages. Thank you! 

Link to comment
  • 1 month later...

@creedon New question. Now that this is set up, is it possible to forward a subdomain to each home page? For example, students.heartologypatientadvocacy.com forwards to heartologypatientadvocacy.com/students. I feel like I've read it's not possible, but just checking to see what you think. 

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