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

Site URL: https://banjo-recorder-36fe.squarespace.com/who

Hi there. I would like to use the same CSS button on navigation linking to multiple pages, one at a time, depending on what page you are. Is it possible to do it? My final goal would be to have a language CSS edited selector button with different behaviours (linking to different pages). Thanks a lot for you help!

It is solved.

You can check it out here:

https://banjo-recorder-36fe.squarespace.com/homeen

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:

.btn:first-of-type
{display: none!important;
color:#E6E6E6!important;
background-color:#000000!important;}

.btn:nth-child(2)
{margin-left: 35px!important}

.btn:hover {
color:#000000!important;
  background-color:#ffffff!important;}

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:

<script>
  $( ( ) => {
    /*
      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 );
          
        } );
        
      } );
      
    } );
    
  </script>

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

<style>
#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}}   
</style>

Hope this helps.

Hi @MiguelFerrao! I'd love to see it in action but the site is private. 

Dear @LaurenZA, with pleasure! Please check it out here: https://banjo-recorder-36fe.squarespace.com/homept

pass: musa