How can I move the customer account "Sign In" link to a different navigation position?

Site URL: https://annabelreese.com

Hello, I'm using the Bryant template for my site (https://annabelreese.com). When I enable customer accounts the corresponding "Sign In" link gets displayed in the navigation, which is fine; however, I'm unable to move that link to a different position. Is it possible to move? Or am I stuck with it being fixed in the first spot? Thank you in advance.

7 minutes ago, blh33 said:

Site URL: https://annabelreese.com

Hello, I'm using the Bryant template for my site (https://annabelreese.com). When I enable customer accounts the corresponding "Sign In" link gets displayed in the navigation, which is fine; however, I'm unable to move that link to a different position. Is it possible to move? Or am I stuck with it being fixed in the first spot? Thank you in advance.

 

You can move any where you want

This is the snippet for that blh33

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function($) {
	$("#mainNavWrapper #mainNavigation .user-account-link").appendTo("#mainNavWrapper #mainNavigation");
});
</script>

@bangank36, no need to load jQuery for this

@blh33 you can change the order with some custom CSS, this won't impact load time because you're not loading jQuery

/* Add this code to Design -> Custom CSS */


#mainNavigation {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
}

#mainNavigation .user-account-link {
    order: 2;
}


#mainNavigation .collection:nth-of-type(6) {
    order: 3;
}

#mobileNavigation {
    display: flex;

    flex-direction:column;
    align-items: baseline;
}

#mobileNavigation .user-account-link {
    order: 2;
}


#mobileNavigation .collection:nth-of-type(6) {
    order: 3;
}

This is also applying the change to mobile

 

8 minutes ago, RyanDejaegher said:

@bangank36, no need to load jQuery for this

@blh33 you can change the order with some custom CSS, this won't impact load time because you're not loading jQuery

/* Add this code to Design -> Custom CSS */


#mainNavigation {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
}

#mainNavigation .user-account-link {
    order: 2;
}


#mainNavigation .collection:nth-of-type(6) {
    order: 3;
}

#mobileNavigation {
    display: flex;

    flex-direction:column;
    align-items: baseline;
}

#mobileNavigation .user-account-link {
    order: 2;
}


#mobileNavigation .collection:nth-of-type(6) {
    order: 3;
}

This is also applying the change to mobile

 

Thank you, our approach are different provide more options for the solutions, jQuery can maximim the browser support

@bangank36, Flexbox is well supported across browsers. 

2 hours ago, RyanDejaegher said:

@bangank36, Flexbox is well supported across browsers. 

That's right, you 're good

@bangank36 @RyanDejaegher Thank you for your quick feedback and solutions. I appreciate it!

Amazing @RyanDejaegher, thank you!

Any idea how to add some spacing to the right of the "Contact Us" button so it's equal distant to the next navigation item like the balance of the nav?

https://www.poochpaper.com/ 

Hi,

I've read this post and it was very useful for me too! Thanks and nice website! I wanted to ask  you though:

How did you make the Sign in link to change into My account once the customer is logged in?

It must be trivial but can't seem to find the way.

Thank you! 

Vasilis

On 6/17/2020 at 4:35 AM, blh33 said:

Site URL: https://annabelreese.com

Hello, I'm using the Bryant template for my site (https://annabelreese.com). When I enable customer accounts the corresponding "Sign In" link gets displayed in the navigation, which is fine; however, I'm unable to move that link to a different position. Is it possible to move? Or am I stuck with it being fixed in the first spot? Thank you in advance.