Edit "Login" Button In Mobile Navigation

Site URL: https://www.useinpress.com/plans

How can I edit the "Login" text button in the mobile navigation on my site? I want to change its color to grey.

Add to Home > Design > Custom CSS

/* Login grey on mobile */
nav.header-menu-nav-list .user-accounts-link span {
    color: grey;
}

Hi @tuanphan! Is there any way to edit the customer account login order on mobile? I have used css to change it to a button and moved the placement on desktop (to be after the contact button). However, I still can't get the placement of the login link on mobile to follow the contact button? I'd also love the button size/styling to match the contact button on mobile? I attached an image below. The link to the site is https://www.jennifergellerfitness.com/home. Thanks for any insight! I greatly appreciate it. 

On 4/4/2021 at 8:51 AM, pgcreativedesigns said:

Hi @tuanphan! Is there any way to edit the customer account login order on mobile? I have used css to change it to a button and moved the placement on desktop (to be after the contact button). However, I still can't get the placement of the login link on mobile to follow the contact button? I'd also love the button size/styling to match the contact button on mobile? I attached an image below. The link to the site is https://www.jennifergellerfitness.com/home. Thanks for any insight! I greatly appreciate it. 

Add this to Last Line in Code Injection Footer

<script>
$(document).ready(function() { 
		$('.header-menu-nav .user-accounts-link').insertAfter('.header-menu-cta>a:first-child');
	});
</script>

On 4/5/2021 at 6:22 AM, tuanphan said:

Add this to Last Line in Code Injection Footer

<script>
$(document).ready(function() { 
		$('.header-menu-nav .user-accounts-link').insertAfter('.header-menu-cta>a:first-child');
	});
</script>

 

This worked perfectly! Thank you so much @tuanphan. Do you know if there's a way to now center the text and that button only on the mobile navigation to match the contact? Thank you!!

On 4/7/2021 at 12:54 AM, pgcreativedesigns said:

This worked perfectly! Thank you so much @tuanphan. Do you know if there's a way to now center the text and that button only on the mobile navigation to match the contact? Thank you!!

Hi,

Add left: 50%; and transform translate -50%

.user-accounts-link .user-accounts-text-link span.unauth:before {
    visibility: visible;
    content: "LOGIN";
    font-size: inherit;
    color: #fff;
    font-family: Lato;
    text-align: center !important;
    position: absolute;
    font-weight: 400;
    letter-spacing: .02em;
    left: 50%;
    transform: translateX(-50%);
}

On 4/11/2021 at 10:26 PM, tuanphan said:

Hi,

Add left: 50%; and transform translate -50%

.user-accounts-link .user-accounts-text-link span.unauth:before {
    visibility: visible;
    content: "LOGIN";
    font-size: inherit;
    color: #fff;
    font-family: Lato;
    text-align: center !important;
    position: absolute;
    font-weight: 400;
    letter-spacing: .02em;
    left: 50%;
    transform: translateX(-50%);
}

 

This worked perfectly @tuanphan! Thank you so much!

On 4/11/2021 at 10:26 PM, tuanphan said:

Hi tuanphan

Add left: 50%; and transform translate -50%

.user-accounts-link .user-accounts-text-link span.unauth:before {
    visibility: visible;
    content: "LOGIN";
    font-size: inherit;
    color: #fff;
    font-family: Lato;
    text-align: center !important;
    position: absolute;
    font-weight: 400;
    letter-spacing: .02em;
    left: 50%;
    transform: translateX(-50%);
}

 

Hi tuanphanI am having the same alignment problems. Not sure if I made a coding error when following and older thread on this with you both. Its not aligned for mobile and pushed to the edge almost off screen on the browser. Confused but any help is greatly appreciated. Code + Screen Shots:

On 6/28/2021 at 3:30 PM, imagineifnyc said:

Hi tuanphanI am having the same alignment problems. Not sure if I made a coding error when following and older thread on this with you both. Its not aligned for mobile and pushed to the edge almost off screen on the browser. Confused but any help is greatly appreciated. Code + Screen Shots:

Hi. What is site url? We can check easier

On 6/30/2021 at 2:38 AM, tuanphan said:

Hi. What is site url? We can check easier

Hi see below:

https://www.imagineifnyc.com

15 hours ago, imagineifnyc said:

Hi see below:

https://www.imagineifnyc.com

Edit line 15-17 to this

.user-accounts-text-link {
    visibility: hidden;
    font-size: 0;
}

Line 18-22 to this

.user-accounts-text-link:before {
    visibility: visible;
    content: "MEMBERS";
    font-size: 16px;
}

On 7/3/2021 at 3:00 AM, tuanphan said:

Edit line 15-17 to this

.user-accounts-text-link {
    visibility: hidden;
    font-size: 0;
}

Line 18-22 to this

.user-accounts-text-link:before {
    visibility: visible;
    content: "MEMBERS";
    font-size: 16px;
}

 

Hi Thanks 🙂that looks better on the browser. But on the mobile its small and off center. Any way to fix this?

Don't remove above code & add this code

/* Mobile members */
@media screen and (max-width:767px) {
.user-accounts-text-link:before {
    text-align: center;
    display: block;
    font-size: 30px;
}
}

7 hours ago, tuanphan said:

Don't remove above code & add this code

/* Mobile members */
@media screen and (max-width:767px) {
.user-accounts-text-link:before {
    text-align: center;
    display: block;
    font-size: 30px;
}
}

 

That did it! Thanks so much! Greatly appreciated. 🙂

Hi sorry just now seeing this message! Yes, thank you any advice you can help with on these issues I would be eternally grateful! 🙂

On 10/29/2021 at 8:35 PM, imagineifnyc said:

Hi sorry just now seeing this message! Yes, thank you any advice you can help with on these issues I would be eternally grateful! 🙂

Hi,

If you need to fix any problem, just let me know. We will check

@tuanphan I’m having this same issue on https://www.amplifyvocalstudio.com with the login button. Is there a way to make it match the same spacing, size and font size as the second button on both desktop and mobile menu? Thanks so much!! 

On 3/21/2022 at 6:10 AM, pgcreativedesigns said:

@tuanphan I’m having this same issue on https://www.amplifyvocalstudio.com with the login button. Is there a way to make it match the same spacing, size and font size as the second button on both desktop and mobile menu? Thanks so much!! 

Try this CSS

/* Login button */
.user-accounts-text-link {
    padding: unset !important;
}
.user-accounts-text-link span {
    font-size: calc(~".9 * 1rem") !important;
    font-family: brandon-grotesque;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: uppercase;
    line-height: 1.2em;
    padding: 0.96em 1.6032em !important;
    display: inline-block;
}

15 hours ago, tuanphan said:

Try this CSS

/* Login button */
.user-accounts-text-link {
    padding: unset !important;
}
.user-accounts-text-link span {
    font-size: calc(~".9 * 1rem") !important;
    font-family: brandon-grotesque;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 0em;
    text-transform: uppercase;
    line-height: 1.2em;
    padding: 0.96em 1.6032em !important;
    display: inline-block;
}

 

Hi @tuanphan! This definitely seemed to work a bit. For some reason the padding still isn't matching the Join For Free button on mobile... is there a way to fix this so these are both the same size? Thanks!

15 hours ago, pgcreativedesigns said:

Hi @tuanphan! This definitely seemed to work a bit. For some reason the padding still isn't matching the Join For Free button on mobile... is there a way to fix this so these are both the same size? Thanks!

You can adjust this value

padding: 0.96em 1.6032em !important;

Hi @tuanphan 

I’ve just added a login button to my website www.JackRavi.com but on   the mobile version when I try and click on shop, newsletter or contact it selects login instead. Any idea how to fix that?

I hope you can help. Thank you!

Jack

Anybody can assist?

On 4/15/2023 at 5:17 PM, jackravi said:

Hi @tuanphan 

I’ve just added a login button to my website www.JackRavi.com but on   the mobile version when I try and click on shop, newsletter or contact it selects login instead. Any idea how to fix that?

I hope you can help. Thank you!

Jack

Because Login item padding overlap other menu items (green space in screenshot)

Add this to Design > Custom CSS to fix problem

/* Mobile Login item */
a.user-accounts-text-link.header-nav-item {
    padding: 0px !important;
    margin: 0 !important;
}

You're an absolute genius, @tuanphan  Thank you!