Adding a button to one link in header nav bar

Site URL: https://moose-sepia-m3gk.squarespace.com/

hello all,

I am trying to change the "Order Online" to have an outline button for the link. I believe I did this before by starting with a template where the button was outlined, but on this particular site, none of the code I am trying is working. Here is the website: https://moose-sepia-m3gk.squarespace.com/ 

and pw: lipscafe-ss

Here is the last code I tried:

//button cta
a.Header-nav-item:last-of-type {
 border: 2px solid white;
 padding: 10px 30px;
 border-radius: 100px;
}

Any help is much appreciated!

Thank you,

22 minutes ago, shellieboo said:

Site URL: https://moose-sepia-m3gk.squarespace.com/

hello all,

I am trying to change the "Order Online" to have an outline button for the link. I believe I did this before by starting with a template where the button was outlined, but on this particular site, none of the code I am trying is working. Here is the website: https://moose-sepia-m3gk.squarespace.com/ 

and pw: lipscafe-ss

 

Here is the last code I tried:

 

//button cta
a.Header-nav-item:last-of-type {
 border: 2px solid white;
 padding: 10px 30px;
 border-radius: 100px;
}

 

Any help is much appreciated!

Thank you,

 

try

.header-nav-item a[href*="/order-online"] {
 border: 2px solid white;
 padding: 10px 30px;
 border-radius: 100px;
  box-sizing: border-box;
}
.header-nav-list {
    align-items: center;
}

Worked perfectly! Thanks @bangank36 !

Yes please! 

9 hours ago, shellieboo said:

Yes please! 

Q1. 2. Add to Design > Custom CSS

/* tablet */
@media screen and (max-width:991px) and (min-width:768px) {
/* about us center image */
[data-section-id="60f5aaa54d59292d6ddfe62e"] .content-wrapper {
    justify-content: center !important;
}
}
/* reduce space above footer */
@media screen and (max-width:991px) {
[data-section-id="60f49031670cec307f70c93f"] {
    min-height: unset !important;
    height: 10px;
}
}

Thanks so much @tuanphan 😃

7 hours ago, shellieboo said:

Thanks so much @tuanphan 😃

Q3. + 4. I see a blank section. If you remove it, I think space will be disappear.

Q5. Add to Design > Custom CSS

/* tablet homepage content width */
@media screen and (max-width:991px) and (min-width:768px) {
body.homepage .content {
    width: 75% !important;
}
}

Great, thank you @tuanphan!  I was away, but fixing it 🙂

On 8/10/2021 at 6:34 AM, shellieboo said:

Great, thank you @tuanphan!  I was away, but fixing it 🙂

Hi. Did you solved all or still need help? 

Hi @tuanphan :

Might you be able to assist me with this as well? Here's site I'm trying to convert last Nav item into button

www.successisalifestyle.com

Thank a bunch!!

On 8/5/2022 at 11:51 AM, IIIJQIII said:

Hi @tuanphan :

Might you be able to assist me with this as well? Here's site I'm trying to convert last Nav item into button

www.successisalifestyle.com

 

Thank a bunch!!

Add to Design > Custom CSS

nav#mainNavigation>div:last-child>a {
    background-color: white;
    color: black;
}