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

7.1 Navigation aligning Button


definitelylisa

Question

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 post
  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

8 answers to this question

Recommended Posts

  • 0

@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 post
  • 0
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 post
  • 0
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.

You can send your question to my email to get detail answer. / How to Setup Password & Share URL

--- Happy New Year

Link to post
  • 0
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 post
  • 0

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

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL

--- Happy New Year

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