Jump to content

Add multiple buttons to header nav in Squarespace 7.1

Go to solution Solved by tuanphan,

Recommended Posts

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
6 hours ago, catg said:

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

the folks at @ghostplugins have one! 
HERE hope that helps.

Link to comment
  • 7 months later...
  • Solution
4 hours ago, Andrius said:

I'm looking for a solution for this as well. Here is the link to my site:
https://salientmedical.squarespace.com/

Looking to set Login nav link the same as the Contact button. Thank you!

Add to Home > Design > Custom CSS

.header-nav-item [href*="/login"] {
    color: #6a92d2 !important;
    border-color: #6a92d2 !important;
    background: transparent;
    border-width: 2px;
    border-style: solid;
    -webkit-transition: 0.1s background-color linear, 0.1s color linear;
    -moz-transition: 0.1s background-color linear, 0.1s color linear;
    -o-transition: 0.1s background-color linear, 0.1s color linear;
    transition: 0.1s background-color linear, 0.1s color linear;
    font-family: Montserrat;
    font-weight: 700;
    font-style: normal;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1.2em;
    padding: .86em 1.6032em !important;
}
nav.header-nav-list {
    align-items: center;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...
1 hour ago, llaham said:

My site is still currently being built though, how do I give you access?

Take a look at Site-wide passwords < https://support.squarespace.com/hc/en-us/articles/205815528-Site-wide-passwords#toc-set-a-site-wide-password >.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
On 9/9/2020 at 8:23 PM, llaham said:

Looking to add a second button under the Book an Appointment Button. Thank you!

Any help would be appreciated.

You will need to have the business plan or above to use this solution.

Please see Header Buttons Add.

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

      {
      
        text : '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.

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

And here we add three.

      {
      
        text : 'enter button text here 1',
        url : 'enter url here 1'
        
        },
      {
      
        text : 'enter button text here 2',
        url : 'enter url here 2'
        
        },
      {
      
        text : 'enter button text here 3',
        url : 'enter url here 3'
        
        },
        

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Well. Interesting. When I did the code the buttons were vertically stacked. We won't be able to do anything unless you set up a site-wide password again and give me the password.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
7 minutes ago, creedon said:

Well. Interesting. When I did the code the buttons were vertically stacked. We won't be able to do anything unless you set up a site-wide password again and give me the password.

Just put the password back on, same as last time. 

One more thing, the second button doesn't appear in the mobile version? How would I fix this?

Thanks again!

Link to comment

Ah. This could be an issue with being in edit mode. If you get out of edit mode does the problem with the buttons not stacking go away? After figuring the stacking problem out, we can move on to mobile implementation.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Dear All,

I followed creedon's specs to get two header buttons in my nav bar.  It worked brilliantly.  However, I've been asked to change the "Give" button to another color.   The website is: www.saintsaviour.org.  Here is the color I'd like it to be changed to: hsl(196, 50%, 47%).  I don't know if this is relevant, but that blue color is defined as "light" in the 3 color palette on my site. It's the Middle color. 

Also, the "Give button" doesn't appear on the mobile menu?

On 9/10/2020 at 9:43 PM, creedon said:

 

Quote

 

You will need to have at least the business plan to implement the following solution.

In Design > Custom CSS put the following.


.header-actions-action.header-actions-action--cta {

  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  
  -ms-flex-direction: column;
  flex-direction: column;
  
  gap: 1vw;
  text-align: center;
  
  }

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>

  $( ( ) => {
  
    let $cta = $( '.header-actions-action--cta' );
    
    let $newButton = $( '.btn', $cta [ 0 ] ).clone ( );
    
    $newButton.attr ( 'href', 'enter url here' );
    $newButton.text ( 'enter button text here' );
    
    $cta.append ( $newButton );
    
    } );
    
  </script>

Let us know how it goes.

 

Edited by Perses
new to this
Link to comment
On 9/23/2020 at 10:46 PM, Perses said:

Dear All,

I followed creedon's specs to get two header buttons in my nav bar.  It worked brilliantly.  However, I've been asked to change the "Give" button to another color.   The website is: www.saintsaviour.org.  Here is the color I'd like it to be changed to: hsl(196, 50%, 47%).  I don't know if this is relevant, but that blue color is defined as "light" in the 3 color palette on my site. It's the Middle color. 

Also, the "Give button" doesn't appear on the mobile menu?

 

Add to Home > Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 9/25/2020 at 9:45 AM, tuanphan said:

}

Hi Tuphan,  Thanks for your suggestion, but it didn't work.  The button remains yellow.  

YES!! I did work!! I stand corrected, but it took about 2 hours to process.  Interesting.

Edited by Perses
Link to comment
  • 1 month later...

@Gabi_Pow Asked about adding a third button as well as support for mobile buttons. I have updated my previous post with a new version of the code. I meant to get to the mobile code previously but that got lost in the shuffle. Thanks to Gabi_Pow for reminding me!

Gabi_Pow, please give the new code a try and let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
On 10/30/2020 at 4:19 PM, creedon said:

@Gabi_Pow Asked about adding a third button as well as support for mobile buttons. I have updated my previous post with a new version of the code. I meant to get to the mobile code previously but that got lost in the shuffle. Thanks to Gabi_Pow for reminding me!

Gabi_Pow, please give the new code a try and let us know how it goes.

Brilliant code, worked like a charm, @creedon! Thank you! Now my question is, how may I format it so the padding between the buttons is equal?

Screen Shot 2020-11-01 at 12.08.06 PM.png

Link to comment
1 hour ago, Gabi_Pow said:

how may I format it so the padding between the buttons is equal?

Replace the CSS from my previous post with the following.

/* begin add buttons to header */

  .header-actions-action.header-actions-action--cta {
  
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    
    grid-gap: 0.5em;
    gap: 0.5rem;
    
    }
    
  /* end add buttons to header */

We've gone from column to row orientation. I've updated my previous post with CSS for both row and column orientation.

Let us know how it goes.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
20 hours ago, creedon said:

Replace the CSS from my previous post with the following.


/* begin add buttons to header */

  .header-actions-action.header-actions-action--cta {
  
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    
    grid-gap: 0.5em;
    gap: 0.5rem;
    
    }
    
  /* end add buttons to header */

We've gone from column to row orientation. I've updated my previous post with CSS for both row and column orientation.

Let us know how it goes.

That seems to have done the trick! 

Thank you so much, @creedon. Hopefully last question for you, is there any reason that code is overriding my CSS to make it match the custom font I've coded for the nav bar?

 

 

Screen Shot 2020-11-02 at 10.37.44 AM.png

Link to comment
7 hours ago, Gabi_Pow said:

is there any reason that code is overriding my CSS

No. You need to target the correct element.

Take the font properties you added out of the CSS I provided above and add the following to Design > Custom CSS.

.header-actions-action--cta a {

  font-family: 'Inter';
  font-weight: 400;
  
  }

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Hello! 

the code works great! just what I was looking for. I'm don't know anything about this, but I'm starting to run a small site for my studio and I would like to ask how can this code be improved in a way that if I'm on a specific page when I click the button I go to other language versions of that page, right now both buttons take me to one specific page in the specific language.

Like I'm at Work page if I click on the ES button it takes me to Trabajo, but if I'm at the About page and I click on the ES button it takes me to the Trabajo page again, I want to go to the Spanish version page of About. What code needs to be added to make that happen?

Thanks,

image.thumb.png.f9d6e9da5bad11d6f68ab782ee226260.png

Edited by Dsebas
Link to comment

@Dsebas

Please give us 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.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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 the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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

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.