Jump to content

Mobile Header Navigation - Hides Social Icons

Recommended Posts

Site URL: https://www.birdmafia.com

Site URL: https://www.birdmafia.com


looking for ideas on what options I have to make the mobile header better. Everything looks great on desktop, but in mobile it makes the social icons hidden until you hit the "..." icon, and it has the shopping bag further over to the left for no apparent reason.  Any ideas on how to make social icons show on top with shopping bag instead of hidden by "..." or if not an option at all     then how to hide the social icons on mobile.  Those are the two ideas I had.

Let me know what you think.

I have this code in to resize the mobile social icons, I tried making them even smaller - it never moved them to top. Just smaller to see once you hit the "..."

//social icon resize in mobile//
@media screen and (max-width:768px) {
.tweak-show-social-in-header .mobile-social .sqs-template-social-icons .sqs-svg-icon--wrapper {
    width: 30px;


Link to comment
  • Replies 5
  • Views 805
  • Created
  • Last Reply

You need to use JavaScript to replace .... with social icons, it is complex, because after moving, you will need to use code to adjust the width and padding of the header elements.

I have saved questions, will check back after answering easy questions on the forum.

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


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.