Jump to content

Add multiple buttons to header nav in Squarespace 7.1

Go to solution Solved by tuanphan,

Recommended Posts

  • 3 weeks later...

Hello, this is my first time posting in a forum, so sorry in advance. Also, first time Squarespace user/builder.

I have been slowly trying to update a site I have been working on with code to make it more interactive. I have been trying to follow this forum to get the two buttons on the left side of my website, as we are wanting to link to external sites, but can't get it work or I am copying the wrong thing. Once this is figured out, I will be moving the menu to the header as well (I just have it as a module on each page for the time being).

image.thumb.png.f1527c7a0589bfc73065cef3624f33ad.png

Any help is greatly appreciated. Thank you in advance.

Link to comment
31 minutes ago, edempster said:

I have been trying to follow this forum to get the two buttons on the left side of my website,

Please post the URL for a page on your site where we can see your issue.

A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

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
On 1/4/2023 at 12:10 PM, edempster said:

I have been trying to follow this forum to get the two buttons on the left side of my website

Are you trying to get the Form CRS and Login Navigation links to appear on the left side?

Please see Building a site header to change the layout.

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
14 hours ago, creedon said:

Are you trying to get the Form CRS and Login Navigation links to appear on the left side?

Hello. I am looking to keep the logo on the left side. Then have the menu (About, Philosophy, Team and Contact Us) in the middle of the header. Then on the right have the Form CRS and Login links as buttons.

Something like the example below (but with two buttons on the right):

image.png.b06551d9b58675d6f625d2922fe17c6a.png

Link to comment
50 minutes ago, creedon said:

Did you try the following Header Layout setting?

Yes, I have. But the only button I could get was the contact us button. Instead, I would like to have the two links that are there now (Form CRS/Login) be the buttons. 

I hope that makes sense... I am sorry if it doesn't.

Link to comment
14 minutes ago, edempster said:

But the only button I could get was the contact us button. Instead, I would like to have the two links that are there now (Form CRS/Login) be the buttons.

Please see the following.

 

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
1 hour ago, creedon said:

Please see the following.

So, I was somehow able to get it (thank you). But the contact us button is not needed. And I tried to toggle it off but then all the buttons disappear. 

image.thumb.png.0e9d9440c886cc4a6418ec6b8d54c1f7.png

Also with the buttons, I would like to make them smaller and a different color. Wasn't sure which code to use for that.

I appreciate all your help.

Link to comment
46 minutes ago, edempster said:

So, I was somehow able to get it (thank you). But the contact us button is not needed. And I tried to toggle it off but then all the buttons disappear. 

Also with the buttons, I would like to make them smaller and a different color. Wasn't sure which code to use for that.

Well, after some playing around with the Footer code and some of the design aspects, it looks like I figured out my own problem, for the most part. Looks like the mobile menu is a bit tricker.

But I would still love to have you look it over to make sure everything is good.

Thank you.

Edited by edempster
Link to comment
On 9/11/2020 at 9:43 AM, creedon said:

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

Please see Add Buttons to Header.

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.

Hi, I followed this instructions but it didn't work. It would be fantastic if you could have a look at my site, URL: balichildrenfoundation.org. I don't know if my Squarespace has been upgraded to 7.1 version or not. Thank you very much

Link to comment
38 minutes ago, Praba said:

It would be fantastic if you could have a look at my site

It appears the code is not installed. It is impossible to diagnose an issue if we can't see the code in action.

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
3 hours ago, Praba said:

Hi, sorry I made the button hidden yesterday. It's shown now

My code is still not installed and I'm unable to assist further.

Perhaps you need to start a new post and state what your end goal is. We then might be able to assist but whatever the issue is, it has nothing to do with my code as it is not installed.

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
2 minutes ago, creedon said:

My code is still not installed and I'm unable to assist further.

Perhaps you need to start a new post and state what your end goal is. We then might able to assist but whatever the issue is, it has nothing to do with my code as it is not installed.

Oh thanks. I haven't installed the code. I'll start a new thread instead for this

Link to comment
  • 3 weeks later...
On 11/1/2020 at 2:41 PM, 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.

This is working perfectly on desktop, but I can't figure out how to make it work on mobile. Any insight? website is Chateaumedispa.squarespace.com at the moment.

Link to comment
1 hour ago, epglenn said:

but I can't figure out how to make it work on mobile. Any insight?

The code you've used looks to be something I might have created. If it is, it's very old.

Please see my September 10, 2020 post in this thread. Remove the code you installed and install my code.

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
18 hours ago, creedon said:

The code you've used looks to be something I might have created. If it is, it's very old.

Please see my September 10, 2020 post in this thread. Remove the code you installed and install my code.

Let us know how it goes.

Do I copy all of the code from here? https://github.com/tomsWebConsulting/twcsl/tree/main/v7.1/Add Buttons to Header#add-buttons-to-header I'm just confused about which parts of the CSS and footer to use. Thank you so much.

Link to comment

@creedon Hi! 

Site: https://countryhousereskin.squarespace.com/
PW: 1234!

Using some of your code I managed to get to the point where I have two buttons, but I'm facing some difficulty when the screen goes to tablet and mobile.

Here's some screenshots to explain my situation better.

1. When I resize my browser to be smaller the buttons are overlapping the logo. Would you know how to prevent this? I would be okay with the buttons stacking as a column in tablet mode. 

image.thumb.png.cf547e37c66afa3b2b44ec2a9ca7a269.png

 

2. When in mobile mode the additional button doesn't appear. Am I missing a code?

image.thumb.png.5601c5aea347877e5246953557f7388d.png

 

Thank you in advance! 

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.