Jump to content

Adding a button to the site header of Carson template

Recommended Posts

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.

Edited by creedon
version 2

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

Link to comment

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

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

Link to comment

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

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

Link to comment

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.

 

 

Link to comment
  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.