Add multiple buttons to header nav in Squarespace 7.1

@creedon

Ok, thanks. I've changed the code but nothing is happening. Not sure if I'm doing this right. 

Here is the screeshot

@Yasmina

The code you show there is only part of the code. You need to add all the code.

Hi Creedon - I have just tried to add the code provided to enable all of my navigation links to be replaced with buttons - Can you please have a look and let me know if I am missing something - I cannot seem to get this to work: www.auconsulting.co.nz

12 hours ago, Greenroom said:

Hi Creedon - I have just tried to add the code provided to enable all of my navigation links to be replaced with buttons - Can you please have a look and let me know if I am missing something - I cannot seem to get this to work: www.auconsulting.co.nz

 

Add to Design > Custom CSS

/* nav links to buttons */
.header-nav-item a {
    background-color: #c9a369;
    color: white !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-bottom: 10px !important;
}

10 hours ago, tuanphan said:

Add to Design > Custom CSS

/* nav links to buttons */
.header-nav-item a {
    background-color: #c9a369;
    color: white !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    margin-bottom: 10px !important;
}

 

Thank you!! Also is there a way to split the button/link text so that it is two lines instead of the one? Eg: About Us / Ko wai mātou would become:

About Us
Ko wai mātou (also can this text be a different colour fill)

 

Hey @creedon and @tuanphan, thanks for the help. Your support has been amazing!

I've got Creedon's code working beautifully. I'm now hoping to have my new button launch in a new page/tab. Could I get some guidance on how to do this? Thanks again!

24 minutes ago, WilM said:

I'm now hoping to have my new button launch in a new page/tab. Could I get some guidance on how to do this? Thanks again!

One way is for me to attempt to update my code to account for this behavioral variation.

I'm game to give it a go but it may take several days to accomplish, assuming I can get it done.

Please bump this thread in several days if I've not posted with a response on the status of my code.

4 hours ago, creedon said:

One way is for me to attempt to update my code to account for this behavioral variation.

I'm game to give it a go but it may take several days to accomplish, assuming I can get it done.

Please bump this thread in several days if I've not posted with a response on the status of my code.

Gah... man - don't sweat it. It's not critical for my site. Was hoping it would be a simple argument to add, but if it's not, please don't go out of your way! 

I have updated my cited code in September 10, 2020 code post.

I have added support for adding a target attribute to the created buttons.

15 hours ago, WilM said:

I'm now hoping to have my new button launch in a new page/tab. Could I get some guidance on how to do this?

Set the value of targetAtttributeValue to _blank

Let us know how it goes.

On 1/12/2022 at 7:33 AM, creedon said:

I have updated my cited code in September 10, 2020 code post.

I have added support for adding a target attribute to the created buttons.

Set the value of targetAtttributeValue to _blank

Let us know how it goes.

Worked a treat! Thank you so much!!

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

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.

I've used this code and it works perfectly! Is there a way to center the text within the button, instead of it aligning left @creedon?

41 minutes ago, wlw said:

Is there a way to center the text within the button, instead of it aligning left

Please post the URL for a page on your site where we can see your issue.

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

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

9 hours ago, creedon said:

Please post the URL for a page on your site where we can see your issue.

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

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

gwcarveracademy.org

On 2/28/2022 at 10:09 AM, wlw said:

I've used this code and it works perfectly! Is there a way to center the text within the button, instead of it aligning left ?

Thank you for reporting this bug.

I have updated the cited code in my September 10, 2020 post.

Let us know how it goes.

14 minutes ago, creedon said:

Thank you for reporting this bug.

I have updated the cited code in my September 10, 2020 post.

Let us know how it goes.

I added that line of code in a few different places and broke the button altogether. Many thanks! It's perfect!

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

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.

Hello, this has all worked wonderfully, thank you! One question: how do I go about changing the color of the additional button(s)?

2 hours ago, pauljranalli said:

One question: how do I go about changing the color of the additional button(s)?

In general you would use CSS to style the buttons. But without being able to see the buttons we have no clue which button style choices you have made.

Please post the URL for a page on your site where we can see your issue.

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

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

@pauljranalli

Quote

2) How do I set it up for one of the additional buttons to open the user's email client?

For the URL you would enter mailto:someone@example.com

Wonderful, thank you! The URL for opening the email client worked great.

As for the button color, I knew it was determined within CSS but am having difficulty locating it. I really appreciate your help!

URL: https://swordfish-quillfish-brsw.squarespace.com/ 

Password: CLN

On 3/3/2022 at 11:06 AM, pauljranalli said:

but am having difficulty locating it.

Add the following to Design > Custom CSS.

.primary-button-style-solid .light .header-actions-action--cta .sqs-button-element--primary:nth-child( 2 ), /* dessktop */
.site-wrapper .header-menu .header-menu-cta a:nth-child( 2 ) /* mobile */

  {
  
    color : red;
    background-color : green;
    border-color : blue;
    
    }

This is for v7.1 and specific to the posters need.

The above would do one button. The following would do more than one.

.primary-button-style-solid .light .header-actions-action--cta .sqs-button-element--primary:nth-child( n+2 ), /* dessktop */
.site-wrapper .header-menu .header-menu-cta a:nth-child( n+2 ) /* mobile */

  {
  
    color : red;
    background-color : green;
    border-color : blue;
    
    }

Let us know how it goes.

Fantastic! Worked out perfectly, thank you so much!

Sorry, one more thing; how do I specify that this should also occur within the mobile menu? Right now both buttons on mobile are still the same color. Really appreciate your help!

37 minutes ago, pauljranalli said:

how do I specify that this should also occur within the mobile menu?

I have updated my code post.

So awesome, thank you! I really appreciate all of your help with this.

Hi! What a great forum thread, thank you to all involved!!

@creedon is there a way to add similar custom code to have a gallery of images/logos ABOVE the menu header entirely? Website is https://palletwine.com/. An extremely rudimentary image example of what I mean is attached. Thank you in advance for any suggestions!