Add multiple buttons to header nav in Squarespace 7.1

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.

Add the following to Design > Custom CSS.

/*

  begin add buttons to header
  
  Version       : 0.6d0
  
  SS Version    : 7.1
  
  Dependancies  : LESS
  
  By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
  
  */
  
  @gap : 0.5rem; // space between buttons
  
  /* direction-order controls whether buttons will be oriented in a row or
     column and if they will be in normal or reversed order. the first argument
     can be row or column, the second argument can be normal or reverse */
  
  .direction-order ( row, normal );
  
  // do not change anything below, there be the borg here
  
  .header .header-actions-action--cta, .header-menu-cta {
  
    display : -webkit-box;
    display : -ms-flexbox;
    display : flex;
    
    -webkit-box-orient : @d3;
    -webkit-box-direction : @d2;
    -ms-flex-direction : @d1;
    flex-direction : @d1;
    
    grid-gap : @gap;
    gap : @gap;
    
    text-align : center;
    
    }
    
  .header-menu-cta {
  
    justify-content : center;
    margin : auto;
    margin-bottom : calc( @gap * 1.25 );
    
    }
    
  .header-menu-cta a {
  
    margin : 0;
    
    }
    
  @media only screen and ( pointer : coarse ) and ( max-width : 1024px ),
    screen and ( max-width : 799px ) {
    
    .header .header-actions-action--cta {
    
      display : none;
      
      }
    }
    
   // direction row, normal
   
  .direction-order ( @d, @o ) when ( @d = row ) and ( @o = normal ) {
  
    @d1 : row;
    @d2 : normal;
    @d3 : horizontal;
    
    }
    
   // direction row, reverse
   
  .direction-order ( @d, @o ) when ( @d = row ) and ( @o = reverse ) {
  
    @d1 : row-reverse;
    @d2 : reverse;
    @d3 : horizontal;
    
    }
    
   // direction column, normal
   
  .direction-order ( @d, @o ) when ( @d = column ) and ( @o = normal ) {
  
    @d1 : column;
    @d2 : normal;
    @d3 : vertical;
    
    }
    
   // direction column, reverse
   
  .direction-order ( @d, @o ) when ( @d = column ) and ( @o = reverse ) {
  
    @d1 : column-reverse;
    @d2 : reverse;
    @d3 : vertical;
    
    }
    
  /* end add buttons to header */

Add the following to Settings > Advanced > Code Injection > HEADER.

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

Add the following to Settings > Advanced > Code Injection > FOOTER.

<script>

  $( ( ) => {
  
    /*
    
      begin add buttons to header
      
      Version       : 0.6d0
      
      SS Version    : 7.1
      
      Dependancies  : jQuery
      
      By            : Thomas Creedon < http://www.tomsWeb.consulting/ >
      
      */
      
      const buttonsTextUrl = [
      
        /*
        
          following is an example of a new button data structure. enter the text
          and url for the new button.
        
          {
        
            text : '[enter button text here between single quotes]',
            url : '[enter url here between single quotes]'
          
            },
          
          */
          
        {
        
          text : '[enter button text here between single quotes]',
          url : '[enter url here between single quotes]'
          
          },
          
        ]
        
      // do not change anything below, there be the borg here
      
      $( '.header-actions-action--cta, .header-menu-cta' ).each ( function ( ) {
      
        const $this = $( this );
        
        $.each ( buttonsTextUrl, function ( index, buttonTextUrl ) {
        
          $( '.btn:first', $this )
          
            .clone ( )
            
            .attr ( 'href', buttonTextUrl.url )
            
            .text ( buttonTextUrl.text )
            
            .appendTo ( $this );
            
          } );
          
        } );
        
      /* end add buttons to header */
      
    } );
    
  </script>

This is for v7.1. You will need to have at the business plan or above to use this solution.

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.

Thanks @creedon for the code and all the help you've provided in this thread.

I was trying it on my Squarespace 7.1 website but had to remove the code because I was having two issues with it which I couldn't solve. I am wondering if you might have any thoughts as what to tweak?

First, I was using the code to place a second button next to the default Squarespace navigation button. The positioning appeared correct on Chrome, but when viewed on Safari the two buttons were flush against each other with no padding in-between. Any way to make this consistent across browsers?

Second, I think when the coded button is next to the Squarespace 7.1 default nav button it takes on the same parameters. I.e., if I set the Squarespace button to open in a new tab then the coded one must as well. I'd like to set the Squarespace button to open in the same tab to an internal page and the coded button to open a file in a new tab. Is there any way to set the coded button to open in a new tab, where it doesn't take on the parameters of the other button to open in the same tab?

Thanks.

On 3/3/2021 at 7:40 AM, MiguelFerrao said:

Dear @creedon, this code is amazing and works perfectly to create multiple buttons, thanks a lot! However, would it be possible to use a similar method to create a single button without using the "edit header > elements > button" path? I am trying to have a single button linking to different pages on each page of the website, making it a language selector for each of those individual pages.
Thanks for your help.

You can add more items to navigation, then we can use custom code to turn nav links to buttons.

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