Jump to content

Adding a button to one link in header nav bar

Recommended Posts

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,

 

Link to comment
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;
}

image.thumb.png.f042bcacbaa8942e8f61bf5209941bb3.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...
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? 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 11 months later...
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.