Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Right align a button in site nav


Builwyf

Question

Site URL: http://orchardroomnyc.com

Hello! 

I am trying to solve for aligning our current 'Book Now RESY button' on the site header. 

orchardroomnyc.com

Is there custom CSS that can help handle this for us? 

The goal would be to right align before the current Instagram icon, it would also be great to center it with all the other site header elements. Thank you in advance! 

Link to post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

2 answers to this question

Recommended Posts

  • 0

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 post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...