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

5 answers to this question

Recommended Posts

  • 1

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, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to 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.

Link to comment
  • 0
2 hours ago, TimButler said:

I would like to do the exact same thing as this, but on 7.1.

When you post a question, it really helps if you include a working link to the site. If the site isn't live, you'll also want to set a public password in the visibility settings and share it with the community.

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital, building the features that Squarespace didn't include. Our mini-extensions allow you to 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.

Link to comment
  • 0
On 5/24/2021 at 8:58 PM, paul2009 said:

When you post a question, it really helps if you include a working link to the site. If the site isn't live, you'll also want to set a public password in the visibility settings and share it with the community.

Hi Paul I'm also struggling to create Members Area button instead of having Members login, this is for Squarespace 7.1 the website is www.kubhula.com and is currently live.

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