Jump to content

How to create a Login Button on Mobile Navigation and put it on the right side of the "Contact Us" button?

Go to solution Solved by Ziggy,

Recommended Posts

Hey guys

Greetings! Anyone can help with the following 2 things? 

No.1 PC version

  • Move the Login button to the Right Side of the social media icon, but before the shopping cart icon (please see attached)

 

No.2 Mobile Version

I'd like to create a
1) Contact button, and a
2) Login button
at the bottom of the mobile navigation (Please see attached picture)

  • Button Position: both buttons should be the Same Size, how to make them asymmetrical?
  • Put both buttons below the social media icons
  • The Contact button shall link to the page: https://www.kohsdevelopment.com/contact

**************

** I don't want the PC version to show Contact button in the header, is that ok?

Thank you so much!!!🙏

Best, 

Jeanette

Move Login Button to the Right Side of Social Media Icons.png

login button and contact button.png

Edited by JJ001
Address wrong
Link to comment
  • Solution
5 hours ago, JJ001 said:

Move the Login button to the Right Side of the social media icon, but before the shopping cart icon (please see attached)

Try this Custom CSS:

.header-actions--right .header-actions-action--social {
  order: 1;
}
.header-actions--right .customerAccountLoginDesktop {
  order: 2;
}
.showOnDesktop {
  order:3 !important;
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
5 hours ago, JJ001 said:

1) Contact button, and a

If you create a contact button in the header, it can be hidden on Desktop with CSS.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.