7.1 Navigation aligning Button

Site URL: https://haddock-cone-l4w2.squarespace.com/config/

I need help with this navigation in 7.1 

I wanted to split the navigation around the logo - and still use a button for Book Now.

I am unable to get the button in alignment with the other nav items.

What do you suggest to get the button to lower down to the same line?

TYIA

Here is the code I used to split the nav:

//navigation//
.header-layout-branding-center-nav-center .header-title-nav-wrapper {flex-basis:100%!important; align:center!important; height:4vw; margin-top:6vw; padding-bottom:7vw} 

.header-title-logo img {margin-bottom:-8.5%!important; margin-top:1vw} 

.header-nav-item:nth-child(4
){margin-left: 35vw!important}

You can add item "Book Now" on Main Navigation, then we will give the code to turn book now link to button.

oh that makes sense! Thank YOU : )

do you have that 7.1 code handy??  (to turn the item into a button)

@tuanphan

I found this code on your site. Is it supposed to work with 7.1?

.header-nav-item [href= "/book now"], .header-menu-nav-item [href="/book now"] {
    background: black;
    color: white;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    border-radius: 5px;
}

It's just not working on this site. Do you have any other suggestions?

thank you so much

Can you add book now item? I can check easier.

8 hours ago, tuanphan said:

Can you add book now item? I can check easier.

Hey Tuanphan! Thank you so much for getting back to me. I've spent hours looking for code to do these two things:

1.  A button behind the BOOK NOW button at the top right: https://www.lemonlandfarm.com

and

2. A 5px margin around the map at the bottom of this page: https://www.lemonlanefarm.com/about-lemon-lane-farm

The site is behind a landing page at the moment (but the link gets around it.)

On 10/11/2020 at 1:22 AM, definitelylisa said:

Hey Tuanphan! Thank you so much for getting back to me. I've spent hours looking for code to do these two things:

1.  A button behind the BOOK NOW button at the top right: https://www.lemonlandfarm.com

and

2. A 5px margin around the map at the bottom of this page: https://www.lemonlanefarm.com/about-lemon-lane-farm

The site is behind a landing page at the moment (but the link gets around it.)

First Url seems have problem. Can you check again?

A 5px margin around the map at the bottom of this >> Can you describe in detail? I don't understand the question.

8 hours ago, tuanphan said:

First Url seems have problem. Can you check again?

A 5px margin around the map at the bottom of this >> Can you describe in detail? I don't understand the question.

The site is not fully live yet. The home page is a landing page.

Both questions can be accessed with this url: https://www.lemonlanefarm.com/about-lemon-lane-farm

1. The book now button is on the right side of the nav. I would like to make it a button. See earlier post above about the code I used to split the nav on both sides of the logo.

2. there is a google map at the bottom of this page: https://www.lemonlanefarm.com/about-lemon-lane-farm   I would like that rectangle map image to have a 5px border around it.

Hope this is more clear...  : )

Q1. Add to Home > Design > Custom CSS

.header-nav-item [href="/pick-your-glampsites"] {
    background: red;
    padding: 10px !important;
    border-radius: 50px;
}

Q2. Add to Home > Design > Custom CSS

/* Map border */
div#block-abcc8cb4d36e6a5d26da div {
    border-radius: 5px;
}

Hey @tuanphan,

So on desktop this works perfectly, on mobile not at all. 

I need the last item to become a button just like on desktop, can you help? I found only a way to customize all items at once, no clue how to target a specific item on mobile navigation.

https://lifeofmusknft.com/home

On 11/2/2021 at 1:57 AM, Anele0610 said:

Hey @tuanphan,

 

So on desktop this works perfectly, on mobile not at all. 

I need the last item to become a button just like on desktop, can you help? I found only a way to customize all items at once, no clue how to target a specific item on mobile navigation.

 

https://lifeofmusknft.com/home

Use this code for mobile

.container.header-menu-nav-item:last-child a {
    background-color: white;
    padding-top: 15px;
    padding-bottom: 10px;
}