Jump to content

I want to add a button to the link furthest to the right of my squarespace navigation

Recommended Posts

Site URL: https://www.enayball.com/

Hey, 

I have made my website using the Jones template. As I understand, it is not possible to make a button in the navigation bar using this template, however, it is possible to do this via CSS code. I have tried to follow this tutorial: https://thirtyeightvisuals.com/blog/squarespace-add-button-to-header-navigation

But due to my limited grasp of CSS I couldn't get it to work.

Would really appreciate it if someone could help me out and provide the coding I need.

I have attached an image of the ideal button styling I am after (although I would want the text to be lower case).

Any and all help much appreciated! 

Thanks in advance!

Example Button.PNG

Link to comment

If you add your 'Discover More' link to the navigation, we can provide you with the CSS to style it this way.

I don't see any (York) template specific features being used, so another option would be to choose a Brine-family template instead. This includes this feature in Site Styles.

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 2 weeks later...

Hi Paul,

Thanks for your reply! Sorry I am so late in seeing it. 

I have now added the link into the navigation bar that I would like to be made into a button. It is the last link in the navigation bar (furthest to the right) and it is called "shop".

If you could provide the CSS that would be incredible. (I am reluctant to change templates as there is some CSS that is York specific currently being used in the website and it would take a lot of fiddling to get a new template to the stage this website is currently at. 

Many thanks,

Eli

Link to comment

Hi Eli @EliMH

Add this to Design > Custom CSS:

/* Last nav item as button */
.primary-nav-wrapper nav .nav-item:last-of-type a {
  background: #fdc214; /* button color */
  color: #fff;
  border-radius: 34px;
  padding: 9px 24px; /* button size */
}
/* Make button lighter on hover */
.primary-nav-wrapper nav .nav-item:last-of-type a:hover {
  opacity: .6;
}

button-on-nav-bar-eli.png.d25ea67e77d4093ac1b184078505f16e.png

 

Let me know how you get on.

-Paul

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Paul you are a life saver, thank you very much!


I have just two other questions related to this, I wonder if you could assist?

1) it would be awesome to be able to see what the button would look like as an outline style, opposed to a solid colour as it currently is. Specifically if it had a yellow outline and became entirely yellow when the mouse hovers over it. 

2) If I change the width of my internet browser's window to be thinner, the button stacks on top of and slightly underneath the rest of the links on the navigation bar (see attached image) and looks strange. I wonder if there is someway to make it act more standardly and look more purposeful when viewed at this window size?

Best,

Eli

button.PNG

Link to comment
20 hours ago, EliMH said:

1) it would be awesome to be able to see what the button would look like as an outline style, opposed to a solid colour as it currently is.

Eli

You can do this by replacing the CSS (supplied above) with something that resembles this:

.primary-nav-wrapper nav .nav-item:last-of-type a {
  color: #000;
  border-radius: 34px;
  padding: 10px 19px;
  border: solid 2px #fdc214;
}
.primary-nav-wrapper nav .nav-item:last-of-type a:hover {
  background: #fdc214;
}

 

20 hours ago, EliMH said:

2) If I change the width of my internet browser's window to be thinner, the button stacks on top of and slightly underneath the rest of the links on the navigation bar

This isn't because of the 'button' code; it would have done this before too. You should be able to improve this by adding this:

.ancillary-header-tagline-position-center.has-tagline [data-nc-base="header"][data-nc-group="header"] [data-nc-container]:last-child {
  flex-grow: 2;
}

-Paul

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 5 months later...
5 minutes ago, cherylr said:

is this code for 7.0 or 7.1?

The answers in this thread are for the York-family template on 7.0, as this doesn't have the capability baked in.

This is a built-in feature on 7.1, see below:

spacer.png

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment

Thanks for your speedy reply.

Yes, the problem I have is that I had to do some custom code to get the logo to be large and centered the nav items to be underneath it rather than forced into a small column.

When I add the button element, the location of it is problematic. It gets shoved off too far to the left side.

But got it sorted out. Thanks.

Edited by cherylr
new info, figured some things out
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.