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

Add multiple buttons to header nav in Squarespace 7.1


catg

Question

I'm trying to create a bilingual site and would like to have the language links as buttons on the header navigation, but it seems Squarespace 7.1 interface only allows for one custom button, social links and cart in the header navigation. I created a PT button for the Portuguese site and would like to create another button, EN for the English site. It there any way to add another button via code to the site header?

810282073_Capturadeecra2020-01-16as14_39_49.png.a4def25ece7b274fb88406e1184db10c.png831694495_Capturadeecra2020-01-16as14_39_57.png.3d89b5a387e5922598a6680278ca1713.png1079697984_Capturadeecra2020-01-16as14_34_40.thumb.png.0b5eca0d778f43eceaa14ee7a1dbe6aa.png

Link to comment

Recommended Posts

  • 0
8 hours ago, Dsebas said:

I would like to ask how can this code be improved

We can leave the button adding code as is and supplement it with new code to deal exclusively with the button translation issue.

First. Edit your header and its button to look like the following.

1527750868_ScreenShot2020-11-08at6_24_08PM.png.9ede984830aa1b136a71b8ecf2b120b2.png

Then edit the button adding code that you already added to look like the following.

    let buttonsNewData = [
    
      {
      
        buttonText: 'ES',
        url: '/es'
        
        }
      ]
      

Go to Settings > Advanced > URL Mappings (URL redirectsand add the following.

/en -> /en/work 301
/es -> /es/trabajo 301

Add the following to Settings > Advanced > Code Injection > FOOTER after the button adding code.

<script>

  /*
  
    translate language button urls based on clicking on a language button on the
    fly. allow site visitor to be on one page in one language and then select a
    language button for another language and be taken to the equivalent page in
    the selected language.
    
    */
    
  $( ( ) => {
  
    var urlFragmentTranslationData = {
    
      '/en' : [ '/work',    '/about' ],
      '/es' : [ '/trabajo', '/nosotros' ]
      
      }
      
    $( '.header-actions-action--cta .btn, .header-menu-cta .btn' )
    
      .each ( function ( ) {
      
        let $this = $( this );
        
        let href = $this.attr ( 'href' );
        let pathname = location.pathname;
        
        let languageUrlFragment = pathname.substring ( 0, 3 );
        
        let i = urlFragmentTranslationData [ languageUrlFragment ]
        
          .indexOf ( pathname.substring ( 3 ) );
          
        // begin bail out conditions
        
          // begin if current page url does not begin with one of our languages
          
            let languageKeys = Object.keys ( urlFragmentTranslationData );
            
            let rePattern = new RegExp ( '^(' + languageKeys.join ( '|' ) + ')' );
            
            if ( ! rePattern.test ( pathname ) ) return;
            
            // end if current page url does not begin with one of our languages
            
          // if language button is for current language
          
            if ( pathname.startsWith ( href ) ) return;
            
          // if url fragment can't be translated
          
            if ( i < 0 ) return;
            
          // end bail out conditions
          
        languageUrlFragment = urlFragmentTranslationData [ href ] [ i ];
        
        $this.attr ( 'href', href + languageUrlFragment );
        
        } );
        
    } );
    
  </script>

This code is for a v7.1 site.

What we are doing is using the original and added button urls as keys to select languages.

The URL Mappings allows us to set a default page if someone hits /en or /es as fallback. Note the redirect may not work in Preview but should work in Full Preview or when logged out of your site.

Finally we have the script that checks where we are language wise and sets up the other language buttons to take us to the equivalent page in the other languages

Please do test this thoroughly. Although I tested it here and it seemed to work well its always good to make sure before making your site public! 🙂 I did not test for more than two languages but I'm pretty sure it will work for more.

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
  • 0
7 hours ago, Dsebas said:

If I decide to add more pages I guess i'll need to add those to the code as well.

Yes but I tried to make it pretty easy. For the button adding code you add to buttonsNewData. And for language translation urlFragmentTranslationData. And of course URL Mappings.

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

Link to comment
  • 0
On 9/10/2020 at 9:43 PM, creedon said:

This is for a v7.1 site and you will need to have at least the business plan to implement the following solution.

In Design > Custom CSS put the following.


/* begin add buttons to header */

  .header-actions-action.header-actions-action--cta {
  
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    
    /*
    
      default orientation is row, for column swap commented values in lines
      below
      
      */
      
    -webkit-box-orient: horizontal; /* vertical */
    -webkit-box-direction: normal;
    -ms-flex-direction: row; /* column */
    flex-direction: row; /* column */
    
    grid-gap: 0.5em;
    gap: 0.5rem;
    
    text-align: center;
    
    }
    
  /* end add buttons to header */

In Settings > Advanced > Code Injection > HEADER put the following.


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

The above loads the jQuery library which I find makes doing these kinds of coding tasks easier.

In Settings > Advanced > Code Injection > FOOTER put the following.


<script>

  /* add buttons to header */
  
  $( ( ) => {
  
    let buttonsNewData = [
    
      {
      
        buttonText: 'enter button text here 1',
        url: 'enter url here 1'
        
        }
      ]
    
    $( '.header-actions-action--cta, .header-menu-cta' ).each ( function ( ) {
    
      let $this = $( this );
      
      $.each ( buttonsNewData, function ( index, buttonNewData ) {
      
        $( '.btn:first', $this ).clone ( )
        
          .attr ( 'href', buttonNewData.url )
          
          .text ( buttonNewData.buttonText )
          
          .appendTo ( $this );
          
        } );
        
      } );
      
    } );
    
  </script>

The code allows for adding more than one button as we can see from the following code snippets. Here we add one.


      {
      
        buttonText: 'enter button text here 1',
        url: 'enter url here 1'
        
        }

By repeating the previous data structure we can add more buttons. Here we add two.


      {
      
        buttonText: 'enter button text here 1',
        url: 'enter url here 1'
        
        }, // notice the comma here
      {
      
        buttonText: 'enter button text here 2',
        url: 'enter url here 2'
        
        } /* notice NO comma here, the last object doesn't get one,
             if you are adding only one button (object) it doesn't get one */

And here we add three.


      {
      
        buttonText: 'enter button text here 1',
        url: 'enter url here 1'
        
        }, // notice the comma here
      {
      
        buttonText: 'enter button text here 2',
        url: 'enter url here 2'
        
        }, // notice the comma here
      {
      
        buttonText: 'enter button text here 3',
        url: 'enter url here 3'
        
        } /* notice NO comma here, the last object doesn't get one,
             if you are adding only one button (object) it doesn't get one */

Let us know how it goes.

Messaged you with a very specific question

Link to comment
  • 0
8 hours ago, duckdog said:

I'm wondering if there's a way to style that second button differently than the first. Perhaps by giving it a unique class or id?

Possibly. Please post the URL to your site. That way I can figure what code you used. I made several code posts in this thread so it would help me to know which one you used.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

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

@KEWALJULLE21

Your issue seems to be different to the original poster's topic. I suggest starting a new forum topic with your issue. It would also help if you could you provide URLs to specific pages with what you want to accomplish on each page.

Edited by creedon

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

Link to comment
  • 0

Hi. These posts have been super helpful! Thank you for that. I'm wanting to see if there's a possibility to have buttons on both sides of the header. I currently have three buttons created but they reside on the right side of the logo since that is the format of the header. 

abueshehmd.com 

Thanks in advance! 

Link to comment
  • 0
On 2/26/2021 at 6:22 AM, yazfuz said:

Hi. These posts have been super helpful! Thank you for that. I'm wanting to see if there's a possibility to have buttons on both sides of the header. I currently have three buttons created but they reside on the right side of the logo since that is the format of the header. 

abueshehmd.com 

Thanks in advance! 

Hi. You need to use JavaScript to do this. Do you use Personal or Business or COmmerce Plan?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

Dear @creedon, this code is amazing and works perfectly to create multiple buttons, thanks a lot! However, would it be possible to use a similar method to create a single button without using the "edit header > elements > button" path? I am trying to have a single button linking to different pages on each page of the website, making it a language selector for each of those individual pages.
Thanks for your help.

Link to comment
  • 0

Hello,

i'm having issues with one button added with this script in mobile version of the site. when i create first button with EN language, it shows all buttons in the menu. but when i switch to second language no buttons are shoeing up in mobile version. in desktop version everything is working fine

Link to comment
  • 0

@pfilipek

Please post the URL for 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
  • 0

@creedonYour code seems to do the trick wonderfully! However, the newly added button is pushed of screen rather than the original being pushed to the left. Would you happen to know how this might be helped?

Link to website: www.questiongamification.com

436481b7ac5dd94d913bf41e2df0c3a0.png

Link to comment
  • 0

@creedonOh no! That's a shame. Took me a while to get that working... I'll take a look but if you have any tips on how I could go about this, that'd be great.

Thanks for your help! Much appreciated!

Edit: I figured it out! Thanks again!

Edited by Aeduuin
Link to comment
  • 0
On 9/25/2020 at 2:45 PM, tuanphan said:

Add to Home > Design > Custom CSS


a.btn[href*="give/now"] {
    background-color: green;
    border-color: green;
}

 

Hi @tuanphan

I also followed @creedon's brilliant specs to get multiple buttons on the header - thank you Creedon!
I will need the last button 'book now' to be red, please can you help with this?

I tried something like the below, but no luck:

a.btn[href*="book/now"]
{ background-color: red;
border-color: red; }


https://seadragon-purple-45ra.squarespace.com/home
PW: 97hTryfC


Thank you 🙂

Link to comment
  • 0
On 4/12/2021 at 10:44 PM, LXK said:

It worked! Thank you so much @creedon 😄 

Hey @creedon,

I'm back with another questions for you.

Is it possible to remove the button's on mobile navigation and change them back to links?

Currently the buttons's are causing the mob navigation links to be super separated.

Your help is very much appreciated 😃

Link to comment
  • 0

@LXK

Have you considered coming at this from the other direction? Put those pages in Main Navigation making them links. Then style the links as buttons with CSS but only for desktop?

My code is great for adding a few extra cta buttons along side regular menu links but not so good at being a replacement for site navigation. That is because of how SS lays out site navigation and cta area.

I've just tried taking out the margins and padding on mobile and it doesn't look good.

1936005613_ScreenShot2021-04-15at10_01_05AM.thumb.png.aafa0db8832dbba6ba47f81d7610fca6.png

This is due to the mobile layout site nav (top of screen) and cta area (bottom) on mobile.

There are several forum posts on making site nav links look like buttons.

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

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...