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

Change the nav button style to outline


jbryan

Question

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!

Edited by jbryan
Link to post
  • Answers 11
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

11 answers to this question

Recommended Posts

  • 0
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

Link to post
  • 0

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/

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

 

Link to post
  • 0

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

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

image.thumb.png.7e9b6f9a56f8727c99475f72b520761a.png

Link to post
  • 0

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.

Edited by leighb
Link to post
  • 0
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?

image.thumb.png.7e9b6f9a56f8727c99475f72b520761a.png

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.

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

 

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