Add multiple buttons to header nav in Squarespace 7.1

8 hours ago, creedon said:

Let us know how it goes.

Well! It's working perfectly! Thanks @creedon . If I decide to add more pages I guess i'll need to add those to the code as well. I hope this thread helps everybody with their sites!

7 hours ago, Dsebas said:

If I decide to add more pages I guess i'll need to add those to the code as well.

Yes but I tried to make it pretty easy. For the button adding code you add to buttonsNewData. And for language translation urlFragmentTranslationData. And of course URL Mappings.

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

This is for a v7.1 site and you will need to have at least the business plan to implement the following solution.

In Design > Custom CSS put the following.

/* begin add buttons to header */

  .header-actions-action.header-actions-action--cta {
  
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    
    /*
    
      default orientation is row, for column swap commented values in lines
      below
      
      */
      
    -webkit-box-orient: horizontal; /* vertical */
    -webkit-box-direction: normal;
    -ms-flex-direction: row; /* column */
    flex-direction: row; /* column */
    
    grid-gap: 0.5em;
    gap: 0.5rem;
    
    text-align: center;
    
    }
    
  /* end add buttons to header */

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>

  /* add buttons to header */
  
  $( ( ) => {
  
    let buttonsNewData = [
    
      {
      
        buttonText: 'enter button text here 1',
        url: 'enter url here 1'
        
        }
      ]
    
    $( '.header-actions-action--cta, .header-menu-cta' ).each ( function ( ) {
    
      let $this = $( this );
      
      $.each ( buttonsNewData, function ( index, buttonNewData ) {
      
        $( '.btn:first', $this ).clone ( )
        
          .attr ( 'href', buttonNewData.url )
          
          .text ( buttonNewData.buttonText )
          
          .appendTo ( $this );
          
        } );
        
      } );
      
    } );
    
  </script>

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

      {
      
        buttonText: '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.

      {
      
        buttonText: 'enter button text here 1',
        url: 'enter url here 1'
        
        }, // notice the comma here
      {
      
        buttonText: 'enter button text here 2',
        url: 'enter url here 2'
        
        } /* notice NO comma here, the last object doesn't get one,
             if you are adding only one button (object) it doesn't get one */

And here we add three.

      {
      
        buttonText: 'enter button text here 1',
        url: 'enter url here 1'
        
        }, // notice the comma here
      {
      
        buttonText: 'enter button text here 2',
        url: 'enter url here 2'
        
        }, // notice the comma here
      {
      
        buttonText: 'enter button text here 3',
        url: 'enter url here 3'
        
        } /* notice NO comma here, the last object doesn't get one,
             if you are adding only one button (object) it doesn't get one */

Let us know how it goes.

Messaged you with a very specific question

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.

Thanks @creedon for this great code. I'm wondering if there's a way to style that second button differently than the first. Perhaps by giving it a unique class or id?
Thanks! 

8 hours ago, duckdog said:

I'm wondering if there's a way to style that second button differently than the first. Perhaps by giving it a unique class or id?

Possibly. Please post the URL to your site. That way I can figure what code you used. I made several code posts in this thread so it would help me to know which one you used.

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.

Is it feasible to hide the Add to cart button on selected merchandise? Or all merchandise in one shop folder, but no longer all merchandise within the whole online keep?

@KEWALJULLE21

Your issue seems to be different to the original poster's topic. I suggest starting a new forum topic with your issue. It would also help if you could you provide URLs to specific pages with what you want to accomplish on each page.

Hi. These posts have been super helpful! Thank you for that. I'm wanting to see if there's a possibility to have buttons on both sides of the header. I currently have three buttons created but they reside on the right side of the logo since that is the format of the header. 

abueshehmd.com 

Thanks in advance! 

On 2/26/2021 at 6:22 AM, yazfuz said:

Hi. These posts have been super helpful! Thank you for that. I'm wanting to see if there's a possibility to have buttons on both sides of the header. I currently have three buttons created but they reside on the right side of the logo since that is the format of the header. 

abueshehmd.com 

Thanks in advance! 

Hi. You need to use JavaScript to do this. Do you use Personal or Business or COmmerce Plan?

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.

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.

Hello,

i'm having issues with one button added with this script in mobile version of the site. when i create first button with EN language, it shows all buttons in the menu. but when i switch to second language no buttons are shoeing up in mobile version. in desktop version everything is working fine

@pfilipek

Please post 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.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

We can then take a look at your issue.

the site is:

www.filipekknives.com

@pfilipek

My code is not involved. By the time my code runs other code has removed the cta button so my code can not clone it.

Here is the line of code that is causing the button to be removed.

$('.multilanguage:not(".lang-'+lang+',.exclude")').remove();

@creedo

you're right. this one is messing things up.

thank you

@creedonYour code seems to do the trick wonderfully! However, the newly added button is pushed of screen rather than the original being pushed to the left. Would you happen to know how this might be helped?

Link to website: www.questiongamification.com

@Aeduuin

Turning off your custom CSS locally allows the buttons to fit properly.

A quick view of your CSS shows that you've added some code to include a graphic. Can you rebuild that code to work better with the additional space the new button adds?

@creedonOh no! That's a shame. Took me a while to get that working... I'll take a look but if you have any tips on how I could go about this, that'd be great.

Thanks for your help! Much appreciated!

Edit: I figured it out! Thanks again!

@Aeduuin

Here's a thought! I think you have enough vertical room to stack the buttons. Use the column value instead of row. There is a note on it in the CSS code I provided.

On 9/25/2020 at 2:45 PM, tuanphan said:

Add to Home > Design > Custom CSS

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

 

Hi @tuanphan

I also followed @creedon's brilliant specs to get multiple buttons on the header - thank you Creedon!
I will need the last button 'book now' to be red, please can you help with this?

I tried something like the below, but no luck:

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

https://seadragon-purple-45ra.squarespace.com/home
PW: 97hTryfC

Thank you 🙂

@LXK

Try the following.

.bright-inverse .header-actions .btn[href="/contact"] {

  background-color : red;
  border-color : red;
  
  }

This is for v7.1.

Let us know how it goes.

2 minutes ago, creedon said:

@LXK

Try the following.

.bright-inverse .header-actions .btn[href="/contact"] {

  background-color : red;
  border-color : red;
  
  }

This is for v7.1.

Let us know how it goes.

It worked! Thank you so much @creedon 😄 

On 4/12/2021 at 10:44 PM, LXK said:

It worked! Thank you so much @creedon 😄 

Hey @creedon,

I'm back with another questions for you.

Is it possible to remove the button's on mobile navigation and change them back to links?

Currently the buttons's are causing the mob navigation links to be super separated.

Your help is very much appreciated 😃