JonJonJJ

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

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

On 8/21/2023 at 11:56 AM, tuanphan said:

Add this to Website > Website Tools > Custom CSS. Replace Pixabay image with your logo image url

 

@tuanphan Thank you so much! Awesome work! 

It's great how much time you invest and how much effort you put into solving other people's problems. Thank you very much for that!

All the best to you!

On 8/19/2023 at 10:05 AM, tuanphan said:

For all gallery slideshows or specific? If specific, can you share link to page where you use slideshow? We can give the exact code

Thanks for your reply.
I think it is called gallery slideshow. But please have a look for your self:

Website: 
PW: 

The logo should be on the section between the yellow field and the news banner (see screenshot attached).

Thanks a lot for your help!

Hi @tuanphan, hi all,

I would like to place a logo over a full-width slideshow. When the images slide automatically (no arrows, no dots), the logo should always stay in the same place.

Is there a code to put a svg file over a gallery section? (squarespace 7.1, Businessplan)

Thank you so much for your help!
Many greetings! 

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,

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!

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)

12 hours ago, paul2009 said:

Hey Jon

In the Custom CSS (around line 31), reduce the z-index to 10 (instead of 10000) and this should do the trick 🙂.

Did this help? Please give feedback by clicking an icon below  ⬇️

Great! Thank you so much for your feedback! 

On 1/6/2023 at 8:38 PM, paul2009 said:

If it helps, I produced a guide for adding a floating button to mobile devices:
Mobile CTA footer for Squarespace 7.1.⬇️

Awesome!

Hi @paul2009. Thanks for sharing the code!

Is there a chance to bring the floating buttons underneath the opened menu (burger menu on mobile)? At the moment the buttons are above the sqsp-header-button.

Best! Jon

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

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! 

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

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

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!

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.