Member Login in navigation change to button - Brine

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!

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

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  ⬇️