Sign-in Link on Mobile

Site URL: https://www.justgoodjuju.com

Thanks to Tuanphan's help, I have the Customer Sign-in link renamed on our site and it works great when viewed on desktop.  Can anyone give me guidance on how to make the same thing happen on Mobile?

Code:

/*  CUSTOMER ACCOUNT SIGN IN LINK  */
.Header-account span.unauth 
{
    visibility: hidden;
}
.Header-account span.unauth:after 
{
    visibility: visible;
    content: "VIP Customer";
}

The left side is very small, if you insert Vip Customer, the logo will overlap Vip Customer.

I agree - I will mess around with words and padding and stuff until I get it acceptable - I just don't know how to reference it!

span.unauth {
    visibility: hidden;
}
span.unauth:after {
    visibility: visible;
    content: "VIP Customer";
}

remove code you used, and insert above code

Sorry but won't that impact both the Desktop and the Mobile?  What I was hoping was to be able to leave the Desktop one exactly as it is and just manipulate the one on the Mobile.

mobile uses

.Mobile-bar.Mobile-bar--top span.unauth {
    visibility: hidden;
}
.Mobile-bar.Mobile-bar--top span.unauth:after {
    visibility: visible;
    content: "VIP Customer";
}

you're amazing.  Thank you so much

On 4/2/2020 at 9:18 PM, tuanphan said:

mobile uses

.Mobile-bar.Mobile-bar--top span.unauth {
    visibility: hidden;
}
.Mobile-bar.Mobile-bar--top span.unauth:after {
    visibility: visible;
    content: "VIP Customer";
}

 

I tried both codes, and they don't work 😞

On 10/14/2020 at 11:18 PM, inunzi said:

I tried both codes, and they don't work 😞

Can you share site url? We can check easier.

yeah sure! https://inunzi.squarespace.com/config

17 hours ago, inunzi said:

yeah sure! https://inunzi.squarespace.com/config

Use this CSS

.header-menu-nav-item span.unauth {
    visibility: hidden;
}
.header-menu-nav-item span.unauth:before {
    visibility: visible;
    content: "VIP Customer";
}

12 hours ago, tuanphan said:

Use this CSS

.header-menu-nav-item span.unauth {
    visibility: hidden;
}
.header-menu-nav-item span.unauth:before {
    visibility: visible;
    content: "VIP Customer";
}

 

The code worked! But the only problem is that the text "VIP LOGIN" is still in my mobile menu 😞.

40 minutes ago, inunzi said:

The code worked! But the only problem is that the text "VIP LOGIN" is still in my mobile menu 😞.

You want to hide or change text? If hide, just remove vip customer code

3 hours ago, tuanphan said:

You want to hide or change text? If hide, just remove vip customer code

I am trying to have the login link in my header on mobile as well as it is on desktop.

You mean: move sign link from navigation into header (left of cart icon)?

On 10/20/2020 at 9:24 PM, tuanphan said:

You mean: move sign link from navigation into header (left of cart icon)?

Yes correct! @tuanphan (sorry for the tag)

On 10/23/2020 at 10:02 PM, inunzi said:

Yes correct! @tuanphan (sorry for the tag)

Add to Code Injection Footer

<script>
  $(document).ready(function() { 
		$('.header-menu .customerAccountLoginMobile').appendTo('.header-display-mobile .header-actions.header-actions--right');
	});
</script>

1 hour ago, tuanphan said:

Add to Code Injection Footer

<script>
  $(document).ready(function() { 
		$('.header-menu .customerAccountLoginMobile').appendTo('.header-display-mobile .header-actions.header-actions--right');
	});
</script>

 

It works!!! Is there anyway to change the size of the svg icon with css? And also is there anyway to have the svg icon to the left of the bag icon? Because, I tried removing “right” and then adding “left” but it didn’t work 😕