Add multiple buttons to header nav in Squarespace 7.1

I'm trying to create a bilingual site and would like to have the language links as buttons on the header navigation, but it seems Squarespace 7.1 interface only allows for one custom button, social links and cart in the header navigation. I created a PT button for the Portuguese site and would like to create another button, EN for the English site. It there any way to add another button via code to the site header?

6 hours ago, catg said:

I'm trying to create a bilingual site and would like to have the language links as buttons on the header navigation, but it seems Squarespace 7.1 interface only allows for one custom button, social links and cart in the header navigation. I created a PT button for the Portuguese site and would like to create another button, EN for the English site. It there any way to add another button via code to the site header?

the folks at @ghostplugins have one! 
HERE hope that helps.

You can use some custom code to create multiple buttons. If you share link to your site, we can take a look.

I'm looking for a solution for this as well. Here is the link to my site:
https://salientmedical.squarespace.com/

Looking to set Login nav link the same as the Contact button. Thank you!

4 hours ago, Andrius said:

I'm looking for a solution for this as well. Here is the link to my site:
https://salientmedical.squarespace.com/

Looking to set Login nav link the same as the Contact button. Thank you!

Add to Home > Design > Custom CSS

.header-nav-item [href*="/login"] {
    color: #6a92d2 !important;
    border-color: #6a92d2 !important;
    background: transparent;
    border-width: 2px;
    border-style: solid;
    -webkit-transition: 0.1s background-color linear, 0.1s color linear;
    -moz-transition: 0.1s background-color linear, 0.1s color linear;
    -o-transition: 0.1s background-color linear, 0.1s color linear;
    transition: 0.1s background-color linear, 0.1s color linear;
    font-family: Montserrat;
    font-weight: 700;
    font-style: normal;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1.2em;
    padding: .86em 1.6032em !important;
}
nav.header-nav-list {
    align-items: center;
}

I'm looking for a solution for this too!!! 
My site is still currently being built though, how do I give you access?

Looking to add a second button under the Book an Appointment Button. Thank you!

Any help would be appreciated. 

1 hour ago, llaham said:

My site is still currently being built though, how do I give you access?

Take a look at Site-wide passwords < https://support.squarespace.com/hc/en-us/articles/205815528-Site-wide-passwords#toc-set-a-site-wide-password >.

On 9/9/2020 at 8:23 PM, llaham said:

Looking to add a second button under the Book an Appointment Button. Thank you!

Any help would be appreciated.

You will need to have the business plan or above to use this solution.

Please see Header Buttons Add.

The code allows for adding more than one button as we can see from the following code snippets. Here we add one.

      {
      
        text : 'enter button text here 1',
        url : 'enter url here 1'
        
        },

By repeating the previous data structure we can add more buttons. Here we add two.

      {
      
        text : 'enter button text here 1',
        url : 'enter url here 1'
        
        },
      {
      
        text : 'enter button text here 2',
        url : 'enter url here 2'
        
        },
        

And here we add three.

      {
      
        text : 'enter button text here 1',
        url : 'enter url here 1'
        
        },
      {
      
        text : 'enter button text here 2',
        url : 'enter url here 2'
        
        },
      {
      
        text : 'enter button text here 3',
        url : 'enter url here 3'
        
        },
        

Let us know how it goes.

On 9/11/2020 at 11:43 AM, creedon said:

Let us know how it goes.

Hey @creedon

Thanks so much for your help. Sorry for the delayed response. 

Would you know how I can make buttons stacked rather than side by side? 

Thanks again

Well. Interesting. When I did the code the buttons were vertically stacked. We won't be able to do anything unless you set up a site-wide password again and give me the password.

7 minutes ago, creedon said:

Well. Interesting. When I did the code the buttons were vertically stacked. We won't be able to do anything unless you set up a site-wide password again and give me the password.

Just put the password back on, same as last time. 

One more thing, the second button doesn't appear in the mobile version? How would I fix this?

Thanks again!

Ah. This could be an issue with being in edit mode. If you get out of edit mode does the problem with the buttons not stacking go away? After figuring the stacking problem out, we can move on to mobile implementation.

3 hours ago, creedon said:

Ah. This could be an issue with being in edit mode. If you get out of edit mode does the problem with the buttons not stacking go away? After figuring the stacking problem out, we can move on to mobile implementation.

You're right. My bad. They stack once I get out of edit mode. 

Dear All,

I followed creedon's specs to get two header buttons in my nav bar.  It worked brilliantly.  However, I've been asked to change the "Give" button to another color.   The website is: www.saintsaviour.org.  Here is the color I'd like it to be changed to: hsl(196, 50%, 47%).  I don't know if this is relevant, but that blue color is defined as "light" in the 3 color palette on my site. It's the Middle color. 

Also, the "Give button" doesn't appear on the mobile menu?

On 9/10/2020 at 9:43 PM, creedon said:

 

Quote

 

You will need to have at least the business plan to implement the following solution.

In Design > Custom CSS put the following.

.header-actions-action.header-actions-action--cta {

  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  
  -ms-flex-direction: column;
  flex-direction: column;
  
  gap: 1vw;
  text-align: center;
  
  }

In Settings > Advanced > Code Injection > HEADER put the following.

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

The above loads the jQuery library which I find makes doing these kinds of coding tasks easier.

In Settings > Advanced > Code Injection > FOOTER put the following.

<script>

  $( ( ) => {
  
    let $cta = $( '.header-actions-action--cta' );
    
    let $newButton = $( '.btn', $cta [ 0 ] ).clone ( );
    
    $newButton.attr ( 'href', 'enter url here' );
    $newButton.text ( 'enter button text here' );
    
    $cta.append ( $newButton );
    
    } );
    
  </script>

Let us know how it goes.

On 9/23/2020 at 10:46 PM, Perses said:

Dear All,

I followed creedon's specs to get two header buttons in my nav bar.  It worked brilliantly.  However, I've been asked to change the "Give" button to another color.   The website is: www.saintsaviour.org.  Here is the color I'd like it to be changed to: hsl(196, 50%, 47%).  I don't know if this is relevant, but that blue color is defined as "light" in the 3 color palette on my site. It's the Middle color. 

Also, the "Give button" doesn't appear on the mobile menu?

 

Add to Home > Design > Custom CSS

a.btn[href*="give/now"] {
    background-color: green;
    border-color: green;
}

On 9/25/2020 at 9:45 AM, tuanphan said:

}

Hi Tuphan,  Thanks for your suggestion, but it didn't work.  The button remains yellow.  

YES!! I did work!! I stand corrected, but it took about 2 hours to process.  Interesting.

@Gabi_Pow Asked about adding a third button as well as support for mobile buttons. I have updated my previous post with a new version of the code. I meant to get to the mobile code previously but that got lost in the shuffle. Thanks to Gabi_Pow for reminding me!

Gabi_Pow, please give the new code a try and let us know how it goes.

On 10/30/2020 at 4:19 PM, creedon said:

@Gabi_Pow Asked about adding a third button as well as support for mobile buttons. I have updated my previous post with a new version of the code. I meant to get to the mobile code previously but that got lost in the shuffle. Thanks to Gabi_Pow for reminding me!

Gabi_Pow, please give the new code a try and let us know how it goes.

Brilliant code, worked like a charm, @creedon! Thank you! Now my question is, how may I format it so the padding between the buttons is equal?

1 hour ago, Gabi_Pow said:

how may I format it so the padding between the buttons is equal?

Replace the CSS from my previous post with the following.

/* begin add buttons to header */

  .header-actions-action.header-actions-action--cta {
  
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    
    grid-gap: 0.5em;
    gap: 0.5rem;
    
    }
    
  /* end add buttons to header */

We've gone from column to row orientation. I've updated my previous post with CSS for both row and column orientation.

Let us know how it goes.

20 hours ago, creedon said:

Replace the CSS from my previous post with the following.

/* begin add buttons to header */

  .header-actions-action.header-actions-action--cta {
  
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    
    grid-gap: 0.5em;
    gap: 0.5rem;
    
    }
    
  /* end add buttons to header */

We've gone from column to row orientation. I've updated my previous post with CSS for both row and column orientation.

Let us know how it goes.

That seems to have done the trick! 

Thank you so much, @creedon. Hopefully last question for you, is there any reason that code is overriding my CSS to make it match the custom font I've coded for the nav bar?

7 hours ago, Gabi_Pow said:

is there any reason that code is overriding my CSS

No. You need to target the correct element.

Take the font properties you added out of the CSS I provided above and add the following to Design > Custom CSS.

.header-actions-action--cta a {

  font-family: 'Inter';
  font-weight: 400;
  
  }

Let us know how it goes.

Hello! 

the code works great! just what I was looking for. I'm don't know anything about this, but I'm starting to run a small site for my studio and I would like to ask how can this code be improved in a way that if I'm on a specific page when I click the button I go to other language versions of that page, right now both buttons take me to one specific page in the specific language.

Like I'm at Work page if I click on the ES button it takes me to Trabajo, but if I'm at the About page and I click on the ES button it takes me to the Trabajo page again, I want to go to the Spanish version page of About. What code needs to be added to make that happen?

Thanks,

@Dsebas

Please give us the URL for your site.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

@creedon

https://www.aostudioviz.com/

is has a home page, so the issues are on the other pages after you select the language

Thanks!

8 hours ago, Dsebas said:

I would like to ask how can this code be improved

We can leave the button adding code as is and supplement it with new code to deal exclusively with the button translation issue.

First. Edit your header and its button to look like the following.

Then edit the button adding code that you already added to look like the following.

    let buttonsNewData = [
    
      {
      
        buttonText: 'ES',
        url: '/es'
        
        }
      ]
      

Go to Settings > Advanced > URL Mappings (URL redirects) and add the following.

/en -> /en/work 301
/es -> /es/trabajo 301

Add the following to Settings > Advanced > Code Injection > FOOTER after the button adding code.

<script>

  /*
  
    translate language button urls based on clicking on a language button on the
    fly. allow site visitor to be on one page in one language and then select a
    language button for another language and be taken to the equivalent page in
    the selected language.
    
    */
    
  $( ( ) => {
  
    var urlFragmentTranslationData = {
    
      '/en' : [ '/work',    '/about' ],
      '/es' : [ '/trabajo', '/nosotros' ]
      
      }
      
    $( '.header-actions-action--cta .btn, .header-menu-cta .btn' )
    
      .each ( function ( ) {
      
        let $this = $( this );
        
        let href = $this.attr ( 'href' );
        let pathname = location.pathname;
        
        let languageUrlFragment = pathname.substring ( 0, 3 );
        
        let i = urlFragmentTranslationData [ languageUrlFragment ]
        
          .indexOf ( pathname.substring ( 3 ) );
          
        // begin bail out conditions
        
          // begin if current page url does not begin with one of our languages
          
            let languageKeys = Object.keys ( urlFragmentTranslationData );
            
            let rePattern = new RegExp ( '^(' + languageKeys.join ( '|' ) + ')' );
            
            if ( ! rePattern.test ( pathname ) ) return;
            
            // end if current page url does not begin with one of our languages
            
          // if language button is for current language
          
            if ( pathname.startsWith ( href ) ) return;
            
          // if url fragment can't be translated
          
            if ( i < 0 ) return;
            
          // end bail out conditions
          
        languageUrlFragment = urlFragmentTranslationData [ href ] [ i ];
        
        $this.attr ( 'href', href + languageUrlFragment );
        
        } );
        
    } );
    
  </script>

This code is for a v7.1 site.

What we are doing is using the original and added button urls as keys to select languages.

The URL Mappings allows us to set a default page if someone hits /en or /es as fallback. Note the redirect may not work in Preview but should work in Full Preview or when logged out of your site.

Finally we have the script that checks where we are language wise and sets up the other language buttons to take us to the equivalent page in the other languages

Please do test this thoroughly. Although I tested it here and it seemed to work well its always good to make sure before making your site public! 🙂 I did not test for more than two languages but I'm pretty sure it will work for more.

Let us know how it goes.