definitelylisa Posted February 20, 2021 Share Posted February 20, 2021 Site URL: http://www.ginapiccaloastrology.com How can I change this client's Member Sign In to a button in the Navigation Menu? help! : ) (why isn't it in line with the other navs anyway?) Link to comment
Solution paul2009 Posted February 20, 2021 Solution Share Posted February 20, 2021 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 ⬇️ creedon 1 About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
definitelylisa Posted February 20, 2021 Author Share Posted February 20, 2021 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 Saturday! paul2009 1 Link to comment
TimButler Posted May 24, 2021 Share Posted May 24, 2021 @paul2009 I would like to do the exact same thing as this, but on 7.1. Any idea as to how I could achieve this? Ideally I'd like to be able to change the language from login/account to sign in/my account FreyaBookDesign 1 Link to comment
paul2009 Posted May 24, 2021 Share Posted May 24, 2021 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. About: Squarespace Circle Leader since 2017. I value honesty, transparency, diversity and great design ♥.Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™. Content: Links in my posts may refer to SF Digital products or may be affiliate links. Catch up on all the release notes and announcements 2023 [for Circle members only]. There's a public version here too!If I helped, you can thank me by clicking one of the emojis below. If you prefer, you can buy me a coffee.Improve your online store with our extensions. Link to comment
Kubhula Posted September 30, 2021 Share Posted September 30, 2021 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment