Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Add multiple buttons to header nav in Squarespace 7.1


catg

Question

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?

810282073_Capturadeecra2020-01-16as14_39_49.png.a4def25ece7b274fb88406e1184db10c.png831694495_Capturadeecra2020-01-16as14_39_57.png.3d89b5a387e5922598a6680278ca1713.png1079697984_Capturadeecra2020-01-16as14_34_40.thumb.png.0b5eca0d778f43eceaa14ee7a1dbe6aa.png

Link to comment

Recommended Posts

  • 2
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 Add Buttons to Header.

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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 1

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.

 

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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?

810282073_Capturadeecra2020-01-16as14_39_49.png.a4def25ece7b274fb88406e1184db10c.png831694495_Capturadeecra2020-01-16as14_39_57.png.3d89b5a387e5922598a6680278ca1713.png1079697984_Capturadeecra2020-01-16as14_34_40.thumb.png.0b5eca0d778f43eceaa14ee7a1dbe6aa.png

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

Link to comment
  • 0

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
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!

Link to comment
  • 0

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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

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.

 

Edited by Perses
new to this
Link to comment
  • 0
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

Edited by Perses
Link to comment
  • 0

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

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
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?

Screen Shot 2020-11-01 at 12.08.06 PM.png

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

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0
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?

 

 

Screen Shot 2020-11-02 at 10.37.44 AM.png

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

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

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,

image.thumb.png.f9d6e9da5bad11d6f68ab782ee226260.png

Edited by Dsebas
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...