Jump to content

Adding Second Button to Site Header

Recommended Posts

  • Replies 7
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
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;
}

image.thumb.png.92147b112321f2075aa7b1a5b53e6a61.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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.

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.