Jump to content

Social Icons on Mobile ! Please HELP !

Go to solution Solved by dariokomazec,

Recommended Posts


I'm working on a new website and I want something like on this image attached with hamburger Menu but when I do this social Icons disappear but I need them on the right. 

Can someone help me, how can I force mobile icons to be visible on mobile.

I have tried to bring them up from footer but I'm not so good with coding. Only what I have achieved was to bring it up with this code but it stays always visible when I scroll down.

   position: fixed !important;
  max-width: 150px !important;
    top: 10px !important;
  right: 10px !important;
  padding-top: 50px !important;
    width: 100% !important;
    height: 100% !important;


Screen Shot 2021-11-16 at 20.20.43.jpg

Link to comment

Can you share your site with the protected password to check it together

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!


Link to comment

You need to share the website if you want us to be able to help you, as @bangank36 said before.

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment

here is the website:


password: 12345 


This is the code that I have used to bring social icons from footer to header and this is what I want but the problem is that it always stays fixed and I want to behave like the heather on scroll...

   position: fixed !important;
  z-index: 999;
    top: 10px !important;
  right: 10px !important;
  padding-top: 10px !important;
    width: 100% !important;
    height: 100% !important;


Link to comment
  • Solution

I have solved the problem:

1. Add social icons to Footer

2. in Styles make Search Icon visable and then hide it with CSS  .Icon--search {display: none}

3. Add this code below to site header code injection and change #block-1fb5bb40728e7dd45230 to your own social icons block ID.

that's it.

<script src="https://code.jquery.com/jquery-3.5.1.min.js" ></script>
  jQuery(document).ready(function($) {


Screen Shot 2021-12-29 at 11.15.30.jpg

Edited by dariokomazec
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.