Creativo Posted August 8 Share Posted August 8 (edited) 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. Edited August 8 by Creativo Link to comment
Lesum Posted August 8 Share Posted August 8 @Creativo You can publish your site with a site-wide password. Unfortunately it's not possible to identify the issue simply by looking at your custom code. Creativo 1 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
Creativo Posted August 8 Author Share Posted August 8 @Lesum https://www.oneofthereids.ca password is square1234! Hope that helps! Link to comment
Solution Lesum Posted August 8 Solution Share Posted August 8 @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> Creativo 1 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment