Adding Second Button to Site Header

Site URL: https://ray-shallot-gz3z.squarespace.com/

Hi there - Im looking to have two buttons next to each other (right bound) on my site's global header. 

https://ray-shallot-gz3z.squarespace.com/ 

One that says apply one that says donate ... can someone help with css ? Where should I paste the code for changes to the header?  

Hi. Do you use Personal or Business Plan?

Each plan will have a different solution.

On 4/12/2021 at 4:28 AM, tuanphan said:

Hi. Do you use Personal or Business Plan?

Each plan will have a different solution.

 

Hi there I have a Business Plan so I am able to have a custom coded solution if you can help ! 

23 hours ago, shannonymous said:

Hi there I have a Business Plan so I am able to have a custom coded solution if you can help ! 

add button to left or right of apply/contribute button?

On 4/21/2021 at 9:39 AM, tuanphan said:

add button to left or right of apply/contribute button?

The platform only allows for one button in the global header , so I'm looking for a custom CSS solution to add a second button that links to a different page 

5 hours ago, shannonymous said:

The platform only allows for one button in the global header , so I'm looking for a custom CSS solution to add a second button that links to a different page 

You can add an item to navigation, then we will give the code to turn link to button. This is easiest way.

eg, with this code (Add to Design  >Custom CSS), will convert make a contributor & apply to buttons

/* nav to buttons */
nav.header-nav-list>div:nth-child(n+6) a {
    background: #153651;
    padding: 10px;
    font-weight: 600;
}
nav.header-nav-list {
    flex-wrap: nowrap;
    align-items: center;
}

Yeah I saw you recommend this approach on an earlier post as well but there is a problem. As you can see on my site the menu navigation is centered underneath my logo and the button is pinned to the right, also slightly higher in terms of alignment. The nav-items are in their own wrapper that is not even as wide as the whole banner.

I would have to rip the nav-item from its container/wrapper, move it to the right and hope to god it still scrolls away in the header. I don't think that's easily achieved. I tried widening the nav-list-wrapper but it doesn't fill the entire width of the screen and even if it did I would still need to find a way to center 4 of the 5 items, but keep one to the right. It would be a CSS nightmare I think.

16 hours ago, TessaRoseJackson said:

Yeah I saw you recommend this approach on an earlier post as well but there is a problem. As you can see on my site the menu navigation is centered underneath my logo and the button is pinned to the right, also slightly higher in terms of alignment. The nav-items are in their own wrapper that is not even as wide as the whole banner.

I would have to rip the nav-item from its container/wrapper, move it to the right and hope to god it still scrolls away in the header. I don't think that's easily achieved. I tried widening the nav-list-wrapper but it doesn't fill the entire width of the screen and even if it did I would still need to find a way to center 4 of the 5 items, but keep one to the right. It would be a CSS nightmare I think.

If you use Business Plan or higher, you can also enable default button, then use jQuery to add second button next to first button. Need to site url to check code