Jump to content

How to link to different pages using the same button on navigation?

Recommended Posts

  • Replies 3
  • Views 1.8k
  • Created
  • Last Reply

It is solved.

You can check it out here:


To create a single or multiple buttons with specific links for an individual page, you will need to:

  1. Hide the automatically create button (edit header>elements>button) on Custom CSS
  2. Add script to Code Injection (Settings>Advanced>Code Injection>Header)
  3. Add multiple buttons to navigation using Code Injection on each page
  4. Hide all the buttons created that you do not want to show on a specific page


1) Here is the Custom CSS I used:

{display: none!important;

{margin-left: 35px!important}

.btn:hover {


2) Code injection for header (Settings>Advanced>Code Injection>Header) 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


3) Code Injection for multiple navigation buttons, thanks to @tuanphan:

  $( ( ) => {
      add buttons to header
      SS Version : 7.1
    let buttonsNewData = [
        buttonText : 'EN',
        url : 'https://banjo-recorder-36fe.squarespace.com/who'   
    // do not change anything below, there be the borg here
    $( '.header-actions-action--cta, .header-menu-cta' ).each ( function ( ) {
      let $this = $( this );
      $.each ( buttonsNewData, function ( index, buttonNewData ) {
        let $buttonNew = $( '.btn:first', $this )
          .clone ( )
          .attr ( 'href', buttonNewData.url )
          .text ( buttonNewData.buttonText )
          .appendTo ( $this );
        } );
      } );
    } );


4) Code injection on page to hide specific elements (in these case navigation buttons)

#header .header-nav-item:nth-child(6) {display:none}
#header .header-nav-item:nth-child(7) {display:none}
#header .header-nav-item:nth-child(8) {display:none}
#header .header-nav-item:nth-child(9) {display:none}
#header .header-nav-item:nth-child(10) {display:none}   
#header .header-nav-item:nth-child(11) {display:none}   
@media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(6) {display:none}}
@media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(7) {display:none}}
@media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(8) {display:none}}
@media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(9) {display:none}}
@media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(10) {display:none}} 
@media screen and (max-width:1511px){#header .header-menu-nav-item:nth-child(11) {display:none}}   

Hope this helps.

Link to comment


This topic is now archived and is closed to further replies.

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