Jump to content

Can I have different headers on various pages?

Recommended Posts

  • 1 month later...

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.

Link to comment
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

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

 

Edited by tuanphan

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

 

Link to comment
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
Link to comment

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! 

 

Link to comment
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
Link to comment
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>

 

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
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)

Link to comment

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!

 

Link to comment
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.

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

Link to comment
  • 11 months later...

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

 

Edited by JonJonJJ
Link to comment

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

Link to comment
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.

 

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

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.