Change the nav button style to outline

I'm using Squarespace 7.1 is there any way to make just the header navigation button to the"outline" style without changing the rest of the buttons? There's not an option for it in header button so I'm wondering if it has to be CSS.

Something like:

.header-actions-action .btn {
  style: outline !important;
}

Although, this CSS doesn't work of course 🤦‍♂️

Thanks!

Can you share link to your site? We can check easier.

I have this question too. Can I send you a message? Thanks

On 1/25/2021 at 4:35 AM, michaell said:

I have this question too. Can I send you a message? Thanks

Can you share link to your site? We can help easier

I also want to make just the header navigation button to and "outline" style without changing the rest of the buttons. It would be nice to know the option for the pill-shaped outline style in case I like the look of that better.  Thank you for your help! Here is my website: https://www.ancientcedarsreiki.ca/

On 2/27/2021 at 8:09 AM, leighb said:

I also want to make just the header navigation button to and "outline" style without changing the rest of the buttons. It would be nice to know the option for the pill-shaped outline style in case I like the look of that better.  Thank you for your help! Here is my website: https://www.ancientcedarsreiki.ca/

Add to Design > Custom CSS

/* header button */
header#header a.btn {
    background: transparent;
    border: 2px solid white;
}

Thank you - I'm on the right track now. Much appreciated. This is what I ended up with:

//HEADER BUTTON//
header#header a.btn {
    background: transparent;
    border: 2px solid #001510;
      color: #001510;
      font-size: 14px;
}

On 3/3/2021 at 11:59 PM, leighb said:

Thank you - I'm on the right track now. Much appreciated. This is what I ended up with:

//HEADER BUTTON//
header#header a.btn {
    background: transparent;
    border: 2px solid #001510;
      color: #001510;
      font-size: 14px;
}

It doesn look good on tablet. Do you want to change to 2 items/row on tablet?

Oh whoa! No it doesn't look good there. Yes, if there's some code for that - thank you for your help and keen eye @tuanphan! I didn't realize it looks different on a tablet vs. mobile.

On 3/6/2021 at 9:56 PM, tuanphan said:

It doesn look good on tablet. Do you want to change to 2 items/row on tablet?

Hi @tuanphan thank you for pointing this out - do you have CSS to fix this image/text issue? As you mentioned there is a problem in tablet view.

Thanks for your help.

On 3/16/2021 at 11:55 AM, leighb said:

Hi @tuanphan thank you for pointing this out - do you have CSS to fix this image/text issue? As you mentioned there is a problem in tablet view.

Thanks for your help.

Add to Design > Custom CSS > Then save & reload your site

/* Fix tablet posters */
@media screen and (max-width:991px) and (min-width:768px) {
div#page-section-60368a623300c10aef1d184e .image-inset {
    padding-bottom: 200% !important;
}
}

Thank you @tuanphan! That did the trick. Very much appreciated. 🙂 

I need help with this too. I added a secondary button to my navigation using a custom code from https://github.com/tomsWebConsulting/twcsl/tree/main/v7.1/Add Buttons to Header#add-buttons-to-header But I want the left navigation button style to be outlined like the "Check Price" button below. Reference like in the 2nd screenshot.

Here is my website: https://www.mystorage.vn/new-page-1

Thank you!

On 1/7/2023 at 2:20 AM, Miicherey said:

I need help with this too. I added a secondary button to my navigation using a custom code from https://github.com/tomsWebConsulting/twcsl/tree/main/v7.1/Add Buttons to Header#add-buttons-to-header But I want the left navigation button style to be outlined like the "Check Price" button below. Reference like in the 2nd screenshot.

Here is my website: https://www.mystorage.vn/new-page-1

Thank you!

Add to Design > Custom CSS

header#header a.btn[href*="tel"] {
    border: 2px solid var(--announcement-bar-background-color) !important;
    background-color: transparent;
    color: var(--announcement-bar-background-color);
}