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

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!

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.

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

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;
}

Let me know how you get on.

-Paul

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

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

I am trying to do this as well but having trouble getting it to work. is this code for 7.0 or 7.1?

working here: https://bassoon-circle-b5b6.squarespace.com/

password NWFC

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:

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.