flyturn33

also, is there a way to smooth out how the play/pause function works on android phones? Thanks <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"/> <style> #play-pause-button { font-size: 40px; /* Increase the size of the icon */ position: fixed; /* Fixed position to ensure it is visible across all scroll positions */ left: 50%; /* Center horizontally */ top: 10px; /* Place it at the top, but within easy reach on mobile */ transform: translateX(-50%); /* Center align horizontally */ z-index: 1001; /* Ensure it appears above other elements, adjust the value according to your header's z-index */ cursor: pointer; /* Makes it clear that the icon is clickable */ } @media (max-width: 640px) { /* Additional adjustments for mobile screens */ #play-pause-button { top: 10px; /* Adjust top positioning to better suit mobile navigation bar height */ } } </style> <script> $(document).ready(function() { // Append audio control icon to the body to ensure visibility across different layouts $('<a id="play-pause-button" class="fa fa-pause"></a>').appendTo('body'); // Changed from .header-nav to body for universal access // Setup audio with a valid hosted audio file URL var audio = new Audio("https://res.cloudinary.com/dlbibt4kv/video/upload/v1713292945/pandapandapanda_uvrlbm.mp3"); audio.loop = true; // Enable looping audio.play(); // Attempt to autoplay audio on load // Handle audio play attempts that are blocked by browsers audio.play().catch(function(error) { console.log("Auto-play was prevented by the browser."); $('#play-pause-button').removeClass('fa-pause').addClass('fa-play'); }); // Toggle play/pause on button interaction, handling both click and touchstart for better mobile compatibility $(document).on('click touchstart', '#play-pause-button', function(e) { e.preventDefault(); // Prevent default to handle quick taps and clicks if ($(this).hasClass('fa-play')) { $(this).removeClass('fa-play').addClass('fa-pause'); audio.play(); } else { $(this).removeClass('fa-pause').addClass('fa-play'); audio.pause(); } }); }); </script>

i fixed the overlapping icon issue, but haven't figured how to layout the mobile menu like this example image.

Any updates on this? Thanks @tuanphan @WCS

also, how can I get the mobile menu drop-down to list the social icons centered like the photo attached? Thanks

thank you, this works except the middle logo is showing the default link icon over the custom icon?

any new insight on this?

Thank you! 😁 CUSTOM CSS: (only working for footer) ///WARPCAST ICON/// .sqs-svg-icon--list a:nth-of-type(2) { svg { display:none; } background-image: url(https://static1.squarespace.com/static/66185d42e9845f297b4d7dd5/t/661ffc93737a253f769db565/1713372307528/warpcast+bw.png); background-size: 100%; background-repeat: no-repeat; } FOOTER INJECTION CODE: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css"/> <style> #play-pause-button { font-size: 40px; /* Increase the size of the icon */ position: fixed; /* Fixed position to ensure it is visible across all scroll positions */ left: 50%; /* Center horizontally */ top: 10px; /* Place it at the top, but within easy reach on mobile */ transform: translateX(-50%); /* Center align horizontally */ z-index: 1001; /* Ensure it appears above other elements, adjust the value according to your header's z-index */ cursor: pointer; /* Makes it clear that the icon is clickable */ } @media (max-width: 640px) { /* Additional adjustments for mobile screens */ #play-pause-button { top: 10px; /* Adjust top positioning to better suit mobile navigation bar height */ } } </style> <script> $(document).ready(function() { // Append audio control icon to the body to ensure visibility across different layouts $('<a id="play-pause-button" class="fa fa-pause"></a>').appendTo('body'); // Changed from .header-nav to body for universal access // Setup audio with a valid hosted audio file URL var audio = new Audio("https://res.cloudinary.com/dlbibt4kv/video/upload/v1713292945/pandapandapanda_uvrlbm.mp3"); audio.loop = true; // Enable looping audio.play(); // Attempt to autoplay audio on load // Handle audio play attempts that are blocked by browsers audio.play().catch(function(error) { console.log("Auto-play was prevented by the browser."); $('#play-pause-button').removeClass('fa-pause').addClass('fa-play'); }); // Toggle play/pause on button interaction, handling both click and touchstart for better mobile compatibility $(document).on('click touchstart', '#play-pause-button', function(e) { e.preventDefault(); // Prevent default to handle quick taps and clicks if ($(this).hasClass('fa-play')) { $(this).removeClass('fa-play').addClass('fa-pause'); audio.play(); } else { $(this).removeClass('fa-pause').addClass('fa-play'); audio.pause(); } }); }); </script>

my custom social icon is only working in the footer and not in the navigation https://hexaflexagon-point-pzx5.squarespace.com/ SAVEpanda please help, thanks