Jump to content

Right align a button in site nav

Recommended Posts

  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

As the button is in the header-nav-list, next to the other links, then it will be restricted to that container.

One way, is to position it absolutely, which takes it out of the document flow, and can be positioned anywhere. 

The code would do it, seems ok when resizing too (which can cause issues for absolutely positioned items) as the mobile menu kicks in quite quickly before it starts blocking things.


.header-nav-item.header-nav-item--external {
    position: absolute;
    right: 50px;

In order to get the nav links to centre vertically in the nav, then you could add align-items: center to the header-nav-list class.

.header-nav-list {
    align-items: center;

Absolutely positioned elements can mess up quite easily so if you can move the book now button out to the header-actions section, where the instagram button is (not sure how the page is setup, so not sure if you can) but then that would make it a bit easier to position.

Hope this helps!

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.