Adding a button to the site header of Carson template

Site URL: http://hachikin.com/

Does anyone know how to add a link button at top-right corner to the site header of the Carson template..?
I'd be grateful if you can help me. Thank you!

The following requires the business plan or above.

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 Design > Custom CSS.

/*

  add button to header
  
  SS Version : 7.0
  Template : Tremont template family
  
  */
  
  #tc-header-button {
  
    position : absolute;
    right : 13px;
    top : 13px;
    
    }

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

<script>

  $( ( ) => {
  
    /*
    
      begin add button to header
      
      SS Version : 7.0
      Template : Tremont template family
      
      */
      
      const buttonLabel = 'Button Label';
      const buttonUrl = '/button-label';
      
      // do not change anything below, there be the borg here
      
      $( '<div class="sqs-block button-block sqs-block-button" data-block-type="53" id="tc-header-button">' +
      
        '<div class="sqs-block-content">' +
        
          '<div class="sqs-block-button-container--center" data-animation-role="button" data-alignment="center" data-button-size="small">' +
          
            '<a class="sqs-block-button-element--small sqs-block-button-element" data-initialized="true">' +
            
              '</a>' +
              
            '</div>' +
            
          '</div>' +
          
        '</div>' )
        
        .find ( 'a' )
        
          .attr ( 'href', buttonUrl )
          
          .text ( buttonLabel )
          
          .end ( )
          
        .appendTo ( '#siteHeader' );
        
      // end add button to header
      
    } );
    
  </script>

This is for v7.0 using the Tremont template family.

Let us know how it goes.

Thank you Creedon, I added the code but it didn't affect..,don't know why

My bad. I've updated my code post.

Hi @creedon, how are you?

Would there be a version of this code (to add buttons to header) for the York template on 7.0?

Any help would be really incredible.

Thanks a lot.

@MiguelFerrao

We can use a different technique for the York template family. First add a button block as the last block of the footer. Set it up as desired.

Add the following to Design > Custom CSS.

/*

  begin add button to header
  
  SS Version : 7.0
  Template : York template family
  
  */
  
  /* no user serviceable parts below */
  
  [data-nc-base="header"] [data-nc-container="right"] [data-nc-element="tc-button"] {
  
    order : 7;
    
    }
    
  #footer .sqs-block-button:last-child {
  
    display : none;
    
    }
    
  /*  add button to header */

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

<script>

  $( ( ) => {
  
    /*
    
      begin add button to header
      
      SS Version : 7.0
      Template : York template family
      
      */
      
      // no user serviceable parts below
      
      $( '#footer .sqs-block-button:last' )
      
        .attr ( 'data-nc-element', 'tc-button' )
      
        .appendTo ( '#header [data-nc-container="right"]' );
        
      // end add button to header
      
    } );
    
  </script>

This is for v7.0 using the York template family.

Let us know how it goes.

Hi @creedon, thanks a lot for the code.

It is working perfectly. The only problem is that I want to add a specific button for each page of my website, linking to second language page versions of each page.

Is there any possibility to use code injection on each page for this purpose?

@MiguelFerrao

Please post the URL for your site. It's hard to help when we can't see 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.

Hi @creedon. The website is public. www.musaparadisiaca.net

Thanks for your help!

@MiguelFerrao

Do you have some example URLs of alternate language pages. I'm trying to understand the whole picture. How things are laid out for each language and how switching between them with a button might work.

Hello @creedon.

I have done it almost perfectly on 7.1. Here is the URL: https://banjo-recorder-36fe.squarespace.com/homept

pass: Musa

It would be really nice to replicate this design on 7.0. In fact, the only complaint I already had with 7.0 was the odd behaviour of the navigation menu. Each time you load a page, the menu jumps to the left, for one second, just to return to the right after.

@MiguelFerrao

Please post the URL for the v7.0 site.

As you say the language switching on the v7.1 seems to be working well.

Hi @creedon
Thank you so much for your help!

I added the new code and it's looking nice! But there's the only one problem that the button placed at top-"left" corner now, but I want to have it at top-"right" corner. Do you know how to tweak this?
Let me share the link to my website so you can see how it's working now. Thank you.
http://hachikin.com/

@3-day-monk

I updated my code post again! There was a typo in the code to install in Custom CSS.

Let us know how it goes.

@creedon
Thank you so much! It's looking perfect! I sincerely appreciate it.