Jump to content

Transparent background for language drop-down menu

Go to solution Solved by bycrawford,

Recommended Posts

Hey here's the code:

.header-actions .language-picker .language-picker-content {
  background: transparent;
}

 

Sam Crawford | by Crawford.
 
Multi-award-winning Squarespace expert
 
💸 Speedrun your first $100k as a Squarespace designer: sixfiguredesign.club
📱 Hire me to build your Squarespace website: calendly.com/bycrawford/call
 
Did my comment help? To help others benefit, leave a like and mark my answer as 'best'. This lets users scroll straight to the solution they need.
Link to comment

And to change the font size:

.header-menu .user-accounts-text-link, .header-menu .cart-style-text, .header-menu .icon-cart-quantity:not(.legacy-cart), .header-menu .language-picker {
    font-size: 6.5vmin;
}

And adjust this value as needed!

Sam Crawford | by Crawford.
 
Multi-award-winning Squarespace expert
 
💸 Speedrun your first $100k as a Squarespace designer: sixfiguredesign.club
📱 Hire me to build your Squarespace website: calendly.com/bycrawford/call
 
Did my comment help? To help others benefit, leave a like and mark my answer as 'best'. This lets users scroll straight to the solution they need.
Link to comment
6 hours ago, bycrawford said:

Hey here's the code:

.header-actions .language-picker .language-picker-content {
  background: transparent;
}

 

Thank you so much it worked! However, may I also ask if I can align it to the right as well? Right now it is to the left.

Tried text-align: right but didn't work. Thanks again!

 

For the mobile version text font size, code also worked! Is there a way to make the globe logo smaller as well... Thank you!

 

Screenshot 2022-12-18 at 11.48.10 AM.png

Screenshot 2022-12-18 at 11.48.17 AM.png

Link to comment
  • Solution

Hey Tiffany,

To shrink the globe icon, use this code (and adjust as needed):

.icon--lg {
    width: 14px;
    height: 14px;
}

Then to align right, use this code:

.language-picker-content a { 

  display: block !important;
  text-align: right !important
  
}

 

Sam Crawford | by Crawford.
 
Multi-award-winning Squarespace expert
 
💸 Speedrun your first $100k as a Squarespace designer: sixfiguredesign.club
📱 Hire me to build your Squarespace website: calendly.com/bycrawford/call
 
Did my comment help? To help others benefit, leave a like and mark my answer as 'best'. This lets users scroll straight to the solution they need.
Link to comment
  • 2 months later...

Just wanted to say thanks to OP and Bycrawford for this post- only reason it took me as long as it did was I kept putting it in the code injector instead of the custom .css box. I think my brain is telling me I've done enough. Thanks again and goodnight!

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.