Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


Question

  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

3 answers to this question

Recommended Posts

  • 0

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.

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...