Jump to content

Social Icons on Mobile ! Please HELP !

Go to solution Solved by dariokomazec,

Recommended Posts

Hi,

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.

#block-yui_3_17_2_1_1640688529513_1878{
 
   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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly. Some links may be affiliate/referral links.

You can also thank me by buying me a coffee .

Squarespace Tips & Tricks: @squareskills (Youtube 📺 Tutorials - Resource site coming soon)

Link to comment

here is the website:

https://megalodon-capybera-w4p6.squarespace.com/ 

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...

#block-1fb5bb40728e7dd45230{
   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>
<script>
  jQuery(document).ready(function($) {
$('#block-1fb5bb40728e7dd45230').insertAfter('.Icon--search');
});
</script>

 

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.