WanderSouls Creative

View Original

How to add a button to navigation menu in Squarespace (2020)



Hello! Dani here! Website designer and founder of Wandersouls creative!

Welcome to another Squarespace video!

In this video, I’m going to show you how to add a button to your navigation menu on your Squarespace website. 

This is a super easy hack if you’re wanting to highlight one of the pages of your website.

Let’s get started!

How to add a button to navigation menu in Squarespace (2020)

First, you’re going to decide which page you’re going to highlight. 

  • Then, go to the “Pages” section. 

  • Take the page that you have decided you wanted to stand out and drag it to the secondary navigation.

  • To make that page into a button, go to “Design” and then “site styles” because we’re going to style the button for the page that you want to stand out. 

  • To make things easier, go to the preview of your website and click on the page that you want to highlight. In this case, I have chosen my page of services. 

  • It will appear a menu to style your page. There, uncheck the “Inherit the Primary Navigation Style” because this will make your page look the same as your primary navigation bar and what we’re looking for is to make it stand out. 

  • Right when you uncheck it, it will appear a series of style options. There, you’re going to click on “Style” and choose the “button” option.  

Now, we just need to style it.

  • If you want to make it the same as your primary navigation style, go ahead and add the font, the weight and the size of the letters that you used in your primary navigation bar. 

  • Next, play around with the structure of the button. Make it how you want it. You can choose from square, solid and you can determine whether you would like as a solid button or just the outline of the button. 

  • In order to create some space between the primary navigation bar from the secondary one, you’re going to go to the first option on the left says “Element Spacing Horizontal” and increase the space how you would like it. Make sure that the “Secondary Navigation Position” is at the top right so it can be the same position as the primary navigation one. 

Lastly, Click “Save” and see the magic happen.

And there you have it!!!! That’s it!

Please let me know if this was useful …or if you have any questions just comment below or send me an email. Thank you for watching and I’ll see you on the next one!



You’ll Also Love💕

Pin this blog for later👇

See this gallery in the original post