Jump to content

Match the login link on mobile version with desktop version

Go to solution Solved by tuanphan,

Recommended Posts

I just customised the login link on the desktop version to look like a button using the code below, but it is not showing on the mobile version. Could someone help me have the same button on the mobile navigation page too please?

 

Here is the code I used for desktop version:

.header-display-desktop a.user-accounts-text-link {

    background-color: #F6F0E1 !important;

    color: #282828 !important;

    padding: 15px 40px;

    border-radius: 50px;

border: 1px solid #282828;

}

 

And here's the password to my website:

YLE2024!

Link to comment
  • Replies 6
  • Views 1.9k
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 months later...
  • Solution
On 7/9/2024 at 3:54 AM, YLE said:

It's https://www.yourlittleexhibition.com/

The password is YLE123!

Use this code for mobile

div.header-menu-nav a.user-accounts-text-link {
    background-color: #F6F0E1 !important;
    color: #282828 !important;
    padding: 15px 40px;
    border-radius: 50px;
    border: 1px solid #282828;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
div.header-menu-nav a.user-accounts-text-link {
    background-color: #3535b7 !important;
    color: #282828 !important;
    padding: 15px 40px;
    border-radius: 50px;
    border: 1px solid #282828;
}

you forget to add BG color.

Edited by paramjeet.kour08

Hi ! I am Paramjeet kaur Top rated SquareSpace Web Designer and Web Developer with SEO For Web Sites. Working Now As freelancer With lowest Rate. Rate $20 per hour.  Till date, I have created over 300 + websites in Squarespace.  Contact Me    Email

Link to comment
On 7/13/2024 at 5:18 AM, tuanphan said:

Use this code for mobile

div.header-menu-nav a.user-accounts-text-link {
    background-color: #F6F0E1 !important;
    color: #282828 !important;
    padding: 15px 40px;
    border-radius: 50px;
    border: 1px solid #282828;
}

 

Thank you!

It's worked and I have managed to change the font size to 22px but not sure how to change the width of the login button.

Can I ask how to make the button's width a bit smaller to match the menu fonts above the button?

Thank you so much.

Screenshot 2024-07-16 at 21.40.57.png

Link to comment
On 7/17/2024 at 3:43 AM, YLE said:

Thank you!

It's worked and I have managed to change the font size to 22px but not sure how to change the width of the login button.

Can I ask how to make the button's width a bit smaller to match the menu fonts above the button?

Thank you so much.

Screenshot 2024-07-16 at 21.40.57.png

You can use this CSS code

div.header-menu-nav div.user-accounts-link a {
    display: inline-block !important;
    min-width: 200px;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.