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
  • Replies 9
  • Views 1.7k
  • Created
  • Last Reply
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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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>

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, 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

Archived

This topic is now archived and is closed to further replies.


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