Changing header button based on language

Site URL: https://studiosbythesea.squarespace.com/

Hello, 

I have set up a multisite page and would like the text on the button on the header to change depending on the language. I realize that this requires some kind of if/conditional statements to be created.. Any one have any advice/tips? 

(PW to site is louli)

I would also like to create a similar thing for the footer (right now its a very simple footer with 2 text blocks)

Thanks in advance!  

57 minutes ago, melina said:

Site URL: https://studiosbythesea.squarespace.com/

Hello, 

I have set up a multisite page and would like the text on the button on the header to change depending on the language. I realize that this requires some kind of if/conditional statements to be created.. Any one have any advice/tips? 

(PW to site is louli)

I would also like to create a similar thing for the footer (right now its a very simple footer with 2 text blocks)

Thanks in advance!  

You can try to make the last menu item become cta button instead, add 2 buttons for 2 language

.header-nav-item.lang-gr:last-child a,
.header-nav-item.lang-en:last-child a{
    color: #fff !important;
    background-color: #468fa2;
    border-color: #468fa2;
    padding: .6em 1.6032em;
    font-size: calc(0.9rem);
    position: relative;
    top: -5px
}

On 12/19/2020 at 5:13 PM, bangank36 said:

You can try to make the last menu item become cta button instead, add 2 buttons for 2 language

.header-nav-item.lang-gr:last-child a,
.header-nav-item.lang-en:last-child a{
    color: #fff !important;
    background-color: #468fa2;
    border-color: #468fa2;
    padding: .6em 1.6032em;
    font-size: calc(0.9rem);
    position: relative;
    top: -5px
}

Thank you! Do I inject this as header code? I added it there and it didnt seem to do anything. 

 

On 12/21/2020 at 12:42 PM, melina said:

 

Hi bankank36! Thanks for your response. This code didn't work when I inserted it into the Header code injection.. Any suggestions? 

On 12/19/2020 at 5:13 PM, bangank36 said:

You can try to make the last menu item become cta button instead, add 2 buttons for 2 language

.header-nav-item.lang-gr:last-child a,
.header-nav-item.lang-en:last-child a{
    color: #fff !important;
    background-color: #468fa2;
    border-color: #468fa2;
    padding: .6em 1.6032em;
    font-size: calc(0.9rem);
    position: relative;
    top: -5px
}

 

7 hours ago, melina said:

Hi bankank36! Thanks for your response. This code didn't work when I inserted it into the Header code injection.. Any suggestions? 

 

have you add 2 links like suggested?

16 hours ago, bangank36 said:

have you add 2 links like suggested?

Hi! No, I haven't.. Where does it go exactly.. Is it something like this (This didn't work either so I imagine Im doing something wrong. 

.header-nav-item.lang-gr:last-child <a href="https://limanakistudios.squarespace.com/gr/kante-kratisi"></a>
.header-nav-item.lang-en:last-child <a href="https://limanakistudios.squarespace.com/en/book-your-stay"></a>
    color: #fff !important;
    background-color: #468fa2;
    border-color: #468fa2;
    padding: .6em 1.6032em;
    font-size: calc(0.9rem);
    position: relative;
    top: -5px
}

5 hours ago, melina said:

Hi! No, I haven't.. Where does it go exactly.. Is it something like this (This didn't work either so I imagine Im doing something wrong. 

.header-nav-item.lang-gr:last-child <a href="https://limanakistudios.squarespace.com/gr/kante-kratisi"></a>
.header-nav-item.lang-en:last-child <a href="https://limanakistudios.squarespace.com/en/book-your-stay"></a>
    color: #fff !important;
    background-color: #468fa2;
    border-color: #468fa2;
    padding: .6em 1.6032em;
    font-size: calc(0.9rem);
    position: relative;
    top: -5px
}

No.

Just copy the code i sent as it was, no modified.

And then add the 2 link to your navigation

In short, the code will turn any last link in the naviagtion into button look and feel

Sorry, Im still not understanding. 

The 2 links to my navigation should  be added where? They are on the website, yes. Should they be added to the code somewhere? When I add teh code as is, it doesn't work. 

3 hours ago, bangank36 said:

No.

Just copy the code i sent as it was, no modified.

And then add the 2 link to your navigation

In short, the code will turn any last link in the naviagtion into button look and feel

6 hours ago, melina said:

Sorry, Im still not understanding. 

The 2 links to my navigation should  be added where? They are on the website, yes. Should they be added to the code somewhere? When I add teh code as is, it doesn't work. 

 

Add the code to Design->Custom Css, it will automatically turn the last link in the navigation into a button look-and-feel. Your site is deleted btw

.header-nav-item.lang-gr:last-child a,
.header-nav-item.lang-en:last-child a{
    color: #fff !important;
    background-color: #468fa2;
    border-color: #468fa2;
    padding: .6em 1.6032em;
    font-size: calc(0.9rem);
    position: relative;
    top: -5px
}

On 12/19/2020 at 9:15 PM, melina said:

Site URL: https://studiosbythesea.squarespace.com/

Hello, 

I have set up a multisite page and would like the text on the button on the header to change depending on the language. I realize that this requires some kind of if/conditional statements to be created.. Any one have any advice/tips? 

(PW to site is louli)

I would also like to create a similar thing for the footer (right now its a very simple footer with 2 text blocks)

Thanks in advance!  

How are you holding up? I seeing the site has been closed

On 12/19/2020 at 11:13 AM, bangank36 said:

You can try to make the last menu item become cta button instead, add 2 buttons for 2 language

.header-nav-item.lang-gr:last-child a,
.header-nav-item.lang-en:last-child a{
    color: #fff !important;
    background-color: #468fa2;
    border-color: #468fa2;
    padding: .6em 1.6032em;
    font-size: calc(0.9rem);
    position: relative;
    top: -5px
}

 

Hi, I am trying this also and this code doesn't work for me. Any tips?

@JennWalker Can you check site url? The site url doesn't exist