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

Edit "Login" Button In Mobile Navigation


JaydenCruzL

Question

  • Answers 15
  • Created
  • Last Reply

Top Posters For This Question

15 answers to this question

Recommended Posts

  • 0

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. 

Screen Shot 2021-04-03 at 9.50.30 PM.png

Link to comment
  • 0
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. 

Screen Shot 2021-04-03 at 9.50.30 PM.png

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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!!

Screen Shot 2021-04-06 at 1.54.22 PM.png

Link to comment
  • 0
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%);
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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!

Link to comment
  • 0
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:

Screen Shot 2021-06-28 at 4.27.10 AM.png

Screen Shot 2021-06-28 at 4.28.17 AM.png

Screen Shot 2021-06-28 at 4.28.59 AM.png

Edited by imagineifnyc
Link to comment
  • 0
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:

Screen Shot 2021-06-28 at 4.27.10 AM.png

Screen Shot 2021-06-28 at 4.28.17 AM.png

Screen Shot 2021-06-28 at 4.28.59 AM.png

Hi. What is site url? We can check easier

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
15 hours ago, imagineifnyc 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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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?

 IMG_8784.thumb.jpg.7eccdada517bb9e3a3019b719228bd1f.jpg

Link to comment
  • 0

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
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. 🙂

 

Link to comment
  • 0
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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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