Can I have different headers on various pages?

Hi, 

This may seem elemental, but can I have a different header on the home and interior pages?

I've got my home page looking just about right, but the header isn't right for interior pages. 

What can I do?

Different header: you mean different logo, navigation links or?

If different logo/nav items/button this is possible

Hi @tuanphan,
I hope it's ok that I'm writing here and not posting a new question on the forum.

I would like to use different languages on my website and have different headers appear on different pages for this purpose.

As an example: 
on pages with the subdirectory "/de" the text in the header should be in german and the nav-items and button should link to the "/de/..." pages. 
On pages with the subdirectory "/it" the text in the header should be in Italian and the nav-items and button should link to the "/it/..." pages. 

Is this possible?

And would it also be possible to change the footer? So that on the "/de" pages a different footer (text, links) is displayed than on the "/it" pages?

Look forward to hearing from you.
All the best! Jon

PS: thanks for your great work here on the forum, your answers have helped me very often.

7 hours ago, JonJonJJ said:

Hi @tuanphan,
I hope it's ok that I'm writing here and not posting a new question on the forum.

I would like to use different languages on my website and have different headers appear on different pages for this purpose.

As an example: 
on pages with the subdirectory "/de" the text in the header should be in german and the nav-items and button should link to the "/de/..." pages. 
On pages with the subdirectory "/it" the text in the header should be in Italian and the nav-items and button should link to the "/it/..." pages. 

Is this possible?

And would it also be possible to change the footer? So that on the "/de" pages a different footer (text, links) is displayed than on the "/it" pages?

Look forward to hearing from you.
All the best! Jon

PS: thanks for your great work here on the forum, your answers have helped me very often.

Yes. Possible. Do you use Personal or Business Plan? Each plan will have a different solution

4 hours ago, tuanphan said:

Yes. Possible. Do you use Personal or Business Plan? Each plan will have a different solution

Great! I use a Business Plan.
This is my Website: https://casapolpo.com/

Thanks a lot!

On 2/25/2023 at 2:34 PM, JonJonJJ said:

Great! I use a Business Plan.
This is my Website: https://casapolpo.com/

Thanks a lot!

You want, on each header, will have

• different logo, different logo link
• different nav items
• different button text, button url
• different footer

Is that right?

First, you need to change all page url, use this format

/de/

/it/

Next, add all items to navigation, we will give code to show/hide them then

With Footer, you can consider adding 2 sections in footer, we will show 1 on DE, show another on IT

If you have very few pages, you can also do it with another approach based on this tutorial

20 hours ago, tuanphan said:

You want, on each header, will have

• different logo, different logo link
• different nav items
• different button text, button url
• different footer

Hi tuanphan,

Yes exactly!
But always the same logo, just different logo links.

If it would be possible, I would love to have three languages (EN, DE, IT).
But only if it is not too much work for you. I am really very grateful for your help.

20 hours ago, tuanphan said:

First, you need to change all page url, use this format

/de/

/it/

I changed all urls.
„/en/ciao“ is the main page in Englisch and also the home,
„/it/ciao“ is the main page in Italian,
„/de/ciao“ is the main page in German
The footer is like the index, just to get an idea of the side structure.

20 hours ago, tuanphan said:

Next, add all items to navigation, we will give code to show/hide them then

I added all items to the navigation
The three headers should look like this:
(the links are just for your info, the items are already linked):

Englisch Version:

• Logo   /en/ciao (home)
• Casa Polpo   /en/casa-polpo
• Cassa Fava   /en/casa-fava
• Monopoli   /en/monopoli
• Puglia   /en/puglia
• [ IT]   /it/ciao
• [ DE]   /de/ciao
• Booking (button)   /en/booking

Italian Version:

• Logo   /it/ciao
• Casa Polpo   /it/casa-polpo
• Casa Fava   /it/casa-fava
• Monopoli   /it/monopoli
• Puglia   /it/puglia
• [ EN]   /en/ciao
• [ DE]   /de/ciao
• Prenotare (button)   /it/prenotare

German Version

• Logo   /de/ciao
• Casa Polpo   /de/casa-polpo
• Casa Fava   /de/casa-fava
• Monopoli   /de/monopoli
• Puglia   /de/puglia
• [ EN]   /en/ciao
• [ IT]   /it/ciao
• Buchen (button)   /de/buchen

Just to let you know:
In order to redirect/forward from [EN], [IT] or [DE] to the correct language version of "/ciao", I added this code in <head> of the three pages:
<meta http-equiv="refresh" content="0;
URL='http://www.casapolpo.com/…‘“>
Please let me know if there is a better way.

20 hours ago, tuanphan said:

With Footer, you can consider adding 2 sections in footer, we will show 1 on DE, show another on IT

I added three sections in footer.
The three Footers should look like this
(the links on the right side are just for your info, the text are already linked):

Englisch Version

• Logo   /en/ciao (home)
• Casa Polpo   /en/casa-polpo
• Cassa Fava   /en/casa-fava
• Monopoli   /en/monopoli
• Puglia   /en/puglia
• Booking   /en/booking
• Contact   /en/contact
• Italiano   /it/ciao
• Deutsch   /de/ciao
• Social Media Icons always the same links
• TOS    /en/tos
• Privacy Policy   /en/privacy-policy
• Cookie Policy   /en/cookie-policy

Italian Version

• Logo   /it/ciao
• Casa Polpo   /it/casa-polpo
• Casa Fava   /it/casa-fava
• Monopoli   /it/monopoli
• Puglia   /it/puglia
• Prenotare   /it/prenotare
• Contatto   /it/contatto
• Englisch   /en/ciao
• Deutsch   /de/ciao
• Social Media Icons always the same links
• CGC   /it/cgc
• Privacy Policy   /en/privacy-policy
• Cookie Policy   /en/cookie-policy

German Version

• Logo   /de/ciao
• Casa Polpo   /de/casa-polpo
• Casa Fava   /de/casa-fava
• Monopoli   /de/monopoli
• Puglia   /de/puglia
• Buchen   /de/buchen
• Kontakt   /de/kontakt
• Englisch   /en/ciao
• iIaliano   /it/ciao
• Social Media Icons always the same links
• AGB   /de/agb
• Privacy Policy   /en/privacy-policy
• Cookie Policy   /en/cookie-policy

Thank you very much for your help.

I am very much looking forward to hearing from you.

Many greetings from Italy! Jon

23 hours ago, JonJonJJ said:

Just to let you know:
In order to redirect/forward from [EN], [IT] or [DE] to the correct language version of "/ciao", I added this code in <head> of the three pages:
<meta http-equiv="refresh" content="0;
URL='http://www.casapolpo.com/…‘“>
Please let me know if there is a better way.

Ok, creating the language selection like this wasn't the best idea 🙂 
So I made a small change:

I created three folders in the nav, these are named like the currently selected language. As dropdown the other two languages appear (these are created as a link to the corresponding "/ciao" (home)).

Looks better. Works better.
I hope using folders works with your code.

The three headers now look like this:

Englisch Version:

• Logo   /en/ciao (home)
• Casa Polpo   /en/casa-polpo
• Cassa Fava   /en/casa-fava
• Monopoli   /en/monopoli
• Puglia   /en/puglia
• EN    Folder
  • italiano   Link to /it/ciao 
  • deutsch   Link to /de/ciao
• Booking (button)   /en/booking

Italian Version:

• Logo   /it/ciao
• Casa Polpo   /it/casa-polpo
• Casa Fava   /it/casa-fava
• Monopoli   /it/monopoli
• Puglia   /it/puglia
• IT    Folder
  • english   Link to /en/ciao 
  • deutsch   Link to /de/ciao
• Prenotare (button)   /it/prenotare

German Version

• Logo   /de/ciao
• Casa Polpo   /de/casa-polpo
• Casa Fava   /de/casa-fava
• Monopoli   /de/monopoli
• Puglia   /de/puglia
• DE    Folder
  • english   Link to /en/ciao 
  • italiano   Link to /it/ciao
• Buchen (button)   /de/buchen

Hi @tuanphan,

so far I managed to get the correct nav items and footer on each page.
I used this code in <head> (this is the example for the german version, of course I used different codes for english and italian). Please feel free to tell me if there is a better way.

1) to hide the wrong nav items:

<style>
  .header-nav-item:nth-child(n+1):nth-child(-n+10),
  .header-menu-nav-folder[data-folder="root"]>div>div:nth-child(n+1):nth-child(-n+10)
  {
    display: none;
  }
</style>

2) to hide the wrong footer:

<style>
  [data-section-id="63e183efc537ab747f1f7f37"],
  [data-section-id="63fd39005928ff0cb06f5858"]
  {
    display: none;
  }
</style>

3) to  link the nav button to the right language page:

<script>
  (function() {
    document.addEventListener('DOMContentLoaded',() => {
      document.querySelector('.header-actions--right .header-actions-action--cta a').setAttribute('href','/de/buchen');
    })
  })()
</script>

So far so good. But I didn't figured out …

• how to change the nav button text on each language page
• how to change the nav logo link on each language page

It would be great if you knew a solution for this. 
Thanks a lot! 

11 minutes ago, JonJonJJ said:

3) to  link the nav button to the right language page:

<script>
  (function() {
    document.addEventListener('DOMContentLoaded',() => {
      document.querySelector('.header-actions--right .header-actions-action--cta a').setAttribute('href','/de/buchen');
    })
  })()
</script>

Update. This code isn't working on mobile ☹️ 

So … I didn't figured out three things:

• how to change the nav button text on each language page
• how to change the nav logo link on each language page
• how to change the the nav button link on mobile

On 3/3/2023 at 4:39 AM, JonJonJJ said:

Update. This code isn't working on mobile ☹️ 

So … I didn't figured out three things:

• how to change the nav button text on each language page
• how to change the nav logo link on each language page
• how to change the the nav button link on mobile

Change this code to this

<script>
  (function() {
    document.addEventListener('DOMContentLoaded',() => {
      document.querySelector('header#header a.btn').setAttribute('href','/de/buchen');
    })
  })()
</script>

7 hours ago, tuanphan said:

Change this code to this

<script>
  (function() {
    document.addEventListener('DOMContentLoaded',() => {
      document.querySelector('header#header a.btn').setAttribute('href','/it/prenotare');
    })
  })()
</script>

 

Thanks for your feedback.
The new code works fine on the desktop version but still not on mobile.
I inserted the new code (with ('href','/it/prenotare')) on this page: https://www.casapolpo.com/it/casa-polpo, but it still leads to /en/booking (the url added in edit website header > global > elements)

hi @tuanphan,

I was researching the forum and found a code you provided on a similar topic:

Thanks a lot!
This helped me write two codes that solved two of my problems.

• how to change the the nav button link (mobile and desktop):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('.header#header a.btn').attr('href','/');
});
</script>

• how to change the nav logo link on each language page (mobile and desktop):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('.header-title-logo a').attr('href','/');
});
</script>

Are these good solution to the two problems or would you recommend a better way?

Finally, I'm down to one unsolved problem:

•  How to change the header button text on each language page.

Do you have an idea how to do this?
Many thanks already!

13 hours ago, JonJonJJ said:

hi @tuanphan,

I was researching the forum and found a code you provided on a similar topic:

Thanks a lot!
This helped me write two codes that solved two of my problems.

• how to change the the nav button link (mobile and desktop):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('.header#header a.btn').attr('href','/');
});
</script>

• how to change the nav logo link on each language page (mobile and desktop):

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('.header-title-logo a').attr('href','/');
});
</script>

Are these good solution to the two problems or would you recommend a better way?

Finally, I'm down to one unsolved problem:

•  How to change the header button text on each language page.

Do you have an idea how to do this?
Many thanks already!

 

You can combine both code to this

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('.header#header a.btn').attr('href','/');
  $('.header-title-logo a').attr('href','/');
});
</script>

and button text, use this shorter code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('.header#header a.btn').attr('href','/');
  $('.header-title-logo a').attr('href','/');
   $("header#header a.btn").html(function() { 
          return $(this).html().replace("Prenotare", "new button text");  
    });
});
</script>

Actually my original intention was to use the code from Brad guide, and tweak it a bit, to only need to insert 1 code into Code Injection.

9 hours ago, tuanphan said:

and button text, use this shorter code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
	$('.header#header a.btn').attr('href','/');
  $('.header-title-logo a').attr('href','/');
   $("header#header a.btn").html(function() { 
          return $(this).html().replace("Prenotare", "new button text");  
    });
});
</script>

Great! works perfekt!

Thank you very much for your time and work. 

Hi @tuanphan,
it's me again 🙂 Hope you doing fine.

 A year ago you helped me with my website (thanks again!!!) and creating three language versions. Everything worked perfectly.
But something happened, maybe squarespace chanced something because I didn't touched the code, and now the language menu on mobile is destroyed.

On desktop everything works still fine. But on mobile the following problems are new:

English language version (https://www.casapolpo.com/)
On the english mobile version this code is not doing anything:

  .header-nav-item:nth-child(n+6):nth-child(-n+15),
  .header-menu-nav-folder[data-folder="root"]>div>div:nth-child(n+6):nth-child(-n+15)
  {
    display: none;
  }

nth-child 6 to 15 ARE visible (but only on mobile, on desktop 6 to 15 are hidden)

Italien language version (https://www.casapolpo.com/it/ciao)
On the italien mobile version no menu items are visible. 

<style>
  .header-nav-item:nth-child(n+1):nth-child(-n+5),
  .header-nav-item:nth-child(n+11):nth-child(-n+15),
  .header-menu-nav-folder[data-folder="root"]>div>div:nth-child(n+1):nth-child(-n+5),
  .header-menu-nav-folder[data-folder="root"]>div>div:nth-child(n+11):nth-child(-n+15)
  {
    display: none;
  }

nth-child 6 to 10 ARE NOT visible, NOTHING is visible, just an empty menu  (but only on mobile, on desktop 1-5 and 11-15 are hidden)

German language version (https://www.casapolpo.com/de/ciao)
Same as on the italien mobile version: no menu items are visible.

  .header-nav-item:nth-child(n+1):nth-child(-n+10),
  .header-menu-nav-folder[data-folder="root"]>div>div:nth-child(n+1):nth-child(-n+10)
  {
    display: none;
  }

nth-child 11 to 15 ARE NOT visible, NOTHING is visible, just an empty menu (but only on mobile, on desktop 1-10 are hidden)

Do you have any idea whats going on?
Would be so great if you could help me out again. Thanks a lot!
Many greetings, Jonathan

Hi @tuanphan,

I think I found a solution. I used the code you provided here (Thank you!) 

I have edited your code slightly and now everything looks good again.

The code I'm now using is this one (for the german version):

/* hide items on desktop */
nav.header-nav-list>div:nth-child(n+1):nth-child(-n+10) {
    display: none;
}
/* hide items on mobile */
[data-folder="root"]>div:first-child>div:first-child>div:nth-child(n+1):nth-child(-n+10) {
    display: none;
}

Instead of this one (the one that worked fine for the last year):

  .header-nav-item:nth-child(n+1):nth-child(-n+10),
  .header-menu-nav-folder[data-folder="root"]>div>div:nth-child(n+1):nth-child(-n+10)
  {
    display: none;
  }

What do you think? Is this a smart solution or would you recommend something else?

Thank you so much for all the work you do here!
Very much appreciated! 

Best, Jonathan

On 2/29/2024 at 10:02 PM, JonJonJJ said:

Hi @tuanphan,

I think I found a solution. I used the code you provided here (Thank you!) 

I have edited your code slightly and now everything looks good again.

The code I'm now using is this one (for the german version):

/* hide items on desktop */
nav.header-nav-list>div:nth-child(n+1):nth-child(-n+10) {
    display: none;
}
/* hide items on mobile */
[data-folder="root"]>div:first-child>div:first-child>div:nth-child(n+1):nth-child(-n+10) {
    display: none;
}

Instead of this one (the one that worked fine for the last year):

  .header-nav-item:nth-child(n+1):nth-child(-n+10),
  .header-menu-nav-folder[data-folder="root"]>div>div:nth-child(n+1):nth-child(-n+10)
  {
    display: none;
  }

What do you think? Is this a smart solution or would you recommend something else?

 

Thank you so much for all the work you do here!
Very much appreciated! 

Best, Jonathan

Yes. With free solution, I also will use this way.