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

Member Login in navigation change to button - Brine


definitelylisa

Question

  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Posts

You can change these with some CSS that you'll add to Design > Custom CSS. Addressing the alignment issue first, you can fix this by adding some margin along the bottom of the sign-in link.

Paul!!! Thank you so so so so much! Works perfectly and looks gorgeous! I just got this account and I wish I had a "before" photo. The client is going to be thrilled. : ) Happy Sat

Posted Images

2 answers to this question

Recommended Posts

  • 0

You can change these with some CSS that you'll add to Design > Custom CSS.

Addressing the alignment issue first, you can fix this by adding some margin along the bottom of the sign-in link.

.Header-account.loaded .user-accounts-text-link {
    margin-bottom: .309em;
}

Once the link is aligned, you can add some background color and some padding to make the link look like a button. You didn't say how you wanted it to look, so I've assumed that you want to match the buttons on the banner image. These have rounded edges, so you'll also need to set a border radius. If you add these to the CSS above, it should look something like this:

.Header-account.loaded .user-accounts-text-link {
    margin-bottom: .309em;
    background-color: #dec29c;
    border-color: #dec29c;
    padding: 17px 21px;
    border-radius: 300px;
}

The link should now look like a button, but it doesn't change when you hover over it. To include this effect (and to match your other buttons) add the following CSS too:

.user-accounts-text-link:hover { 
    opacity: .8;
} 

Note that due to a bug on Squarespace (Feb 2021) you may need to save and close the CSS panel before you'll be able to hover over the button to see this effect. Hopefully this bug will be fixed soon!

gina-piccalo-desktop-nav.thumb.gif.f872f2dd11c91d0ba1bb18e332998244.gif

The CSS above should take care of the link in the desktop nav. If you'd like to do the same with the link on mobile devices, you'll need to add some more CSS, but this time referring to the Mobile-bar. I've included some settings to make the link uppercase and reduce the font size slightly.

.Mobile-bar-account.loaded .user-accounts-text-link {
    background-color: #dec29c;
    border-color: #dec29c;
    padding: 17px 21px;
    border-radius: 300px;
    text-transform: uppercase;
    font-size: 11px;
}

gina-piccalo-mobile-nav.gif.1fe4ae0778d42f9287aac761659afd10.gif

I hope this helps.

Notes: 
The instructions above are for a Squarespace 7.0 site using a Brine-family template. Other versions and templates will require different code.

-Paul

  If this post has helped you, please click an icon below  ⬇️

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digitalbuilding the features that Squarespace didn't include. Pick dates in any format, show prices in other currencies, take orders without payment or improve your cartI value honesty, integrity, transparency and respect. Links in my posts may refer to SF Digital products or may be affiliate links.  Squarespace. I've been a loyal supporter of the platform since 2007. 

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