Change items in navigation based on URL path

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:

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!

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.

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. 

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? 

I DM'd @SmallSitesSarah. 

@creedon Thanks so much for your 1:1 help! Question: I added another page (/seniors/about-us), but it's not showing in the senior page nav. Can you help? 

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>

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! 

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