Jump to content

7.1 Navigation aligning Button

Recommended Posts

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}

Screen Shot 2020-10-07 at 3.57.01 PM.png

Link to comment
  • Replies 10
  • Views 2.1k
  • Created
  • Last Reply

Top Posters In This Topic

@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

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

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

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
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...  : )

Link to comment

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;
}

 

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
  • 1 year later...
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;
}

 

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.