Jump to content
Go to solution Solved by inside_the_square,

Recommended Posts

  • Replies 2
  • Views 440
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

  • Solution

Thanks for sharing the link @mikelakeland - that's super helpful for code questions like this! The social icons in a mobile menu have an extra special selector class added .mobile  

I updated your existing code to have the two custom icons work on your mobile menu using that extra label. You'll want to add this to the end of your custom CSS, leaving the old code as-is so it keeps working on larger screens 👍👍

.header-menu-actions-action.header-menu-actions-action--social.mobile:nth-of-type(5) .icon--fill{
 background-image:url(https://static1.squarespace.com/static/65df4f2399036b6578e26fb5/t/66170b248b1a5224371bd320/1712786212638/VK.png);
 background-size: 100%;
 background-repeat: no-repeat
}

.header-menu-actions-action.header-menu-actions-action--social.mobile:nth-of-type(7) .icon--fill{
 background-image:url(https://static1.squarespace.com/static/65df4f2399036b6578e26fb5/t/6643869445e11541f9f9e9c3/1715701396661/Little-Red-Book.png)!important;
 background-size: 100%;
 background-repeat: no-repeat
}

.header-menu-actions-action.header-menu-actions-action--social.mobile:nth-of-type(7) svg, .header-menu-actions-action.header-menu-actions-action--social.mobile:nth-of-type(5) svg {
 display: none
}

 

🤓 Creator of InsideTheSquare.co
SQUARESPACE CIRCLE LEADER SQUARESPACE EXPERT SQUARESPACE EMPLOYEE EDUCATOR CERTIFIED CUSTOM CODE EXPERT

🗺️ New to Squarespace? Get your free roadmap: insidethesquare.co/roadmap
🙋‍♀️ New to CSS? Learn the basics for free: insidethesquare.co/learn
️ Ready to go pro? Get my custom code collection: insidethesquare.co/css

 

BeccaHarpain.gif.236d6ddd88c7d637645b762799f501a8.gif

 

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.