Jump to content

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

Recommended Posts

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.

 1679439484_ScreenShot2020-06-16at11_35_02PM.thumb.png.fdb6c066f29f3d666a426c77bb72d3d5.png

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

 1679439484_ScreenShot2020-06-16at11_35_02PM.thumb.png.fdb6c066f29f3d666a426c77bb72d3d5.png

You can move any where you want

image.thumb.png.080dea0c2be5b96100fb997dc67b5910.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

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>

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

@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
image.png.a3f055119fadca7759f2e609df1d1dfc.png
 

Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Link to comment
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
image.png.a3f055119fadca7759f2e609df1d1dfc.png
 

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
2 hours ago, RyanDejaegher said:

@bangank36, Flexbox is well supported across browsers. 

That's right, you 're good

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 3 months later...
  • 4 months later...

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.

 1679439484_ScreenShot2020-06-16at11_35_02PM.thumb.png.fdb6c066f29f3d666a426c77bb72d3d5.png

 

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

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.