Jump to content

Social icons disappear when in mobile mode

Go to solution Solved by Lesum,

Recommended Posts

Hi there!

I'm doing a bit of custom work for a client's website and I can't seem to figure out why the social icons are not showing up when in mobile view. The only social icon that shows up is the email so it seems my code is affecting the Instagram and LinkedIn icons.

Squarespace Support was able to let me know that my custom CSS is not the issue.. it's the code I have inside code injection.

Website is still being developed so it's not live.

If anyone else is able to give me some input on how I can move the flag icons that are before the social media icons to after the icons.. that would be appreciated. I'd like to have the social media icons first and then the language switcher flags at the end.

Screenshot 2024-08-07 at 9.47.47 PM.png

Screenshot 2024-08-07 at 9.48.18 PM.png

Screenshot 2024-08-07 at 9.50.06 PM.png

Screenshot 2024-08-07 at 9.50.14 PM.png

Edited by Creativo
Link to comment
  • Solution

@Creativo You can add this code in Website > Pages > Website Tools > Code Injection > Header to address the issue: 

<script>
  document.addEventListener('DOMContentLoaded', function () {
  function moveSocialActions() {
    var socialActions = document.querySelector('.header-display-mobile .header-actions.header-actions--right .header-actions-action.header-actions-action--social');
    var socialAccounts = document.querySelector('.header-menu-actions.social-accounts');

    if (window.innerWidth < 1025) {
      if (socialActions && socialAccounts) {
        socialActions.parentNode.removeChild(socialActions);
        socialAccounts.appendChild(socialActions);
      }
    }
  }

  moveSocialActions();

  window.addEventListener('resize', function () {
    moveSocialActions();
  });
});

</script>

<style>
@media screen and (max-width: 1024px) {
.header-menu-actions-action.header-menu-actions-action--social.mobile {
   display: none !important;
}
.header-actions-action.header-actions-action--social {
   display: flex !important;
   gap: 5px !important;
}
.header-actions-action.header-actions-action--social .language {
   display: none !important;
}
} 

</style>  

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

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.