flyturn33 Posted April 17 Posted April 17 (edited) 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 Edited April 17 by flyturn33
WCS Posted April 17 Posted April 17 @flyturn33 Okay ... kuddos for having the most surprising site linked in a forum chat that I've seen! That was amazing. Can you share the code you're using so we can tweak it for your header? Gotta support you in your quest. Did I help? Click 👍 or mark it as the solution! This helps others find the answers they need. Meghan | Westerly Creative Studio 🍪 Still need your website policies? Termageddon makes it easy. Get 10% off your first year! (< affiliate link)
flyturn33 Posted April 17 Author Posted April 17 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>
tuanphan Posted April 21 Posted April 21 With Header, use this code to Website > Website Tools > Custom CSS header#header a.icon[href*="warpcast"] { background-image: url(https://static1.squarespace.com/static/66185d42e9845f297b4d7dd5/t/661ffc93737a253f769db565/1713372307528/warpcast+bw.png); background-size: 100%; background-repeat: no-repeat } header#header a.icon[href*="t.me"] { background-image: url(https://static1.squarespace.com/static/66185d42e9845f297b4d7dd5/t/66203d3ea92e4d34ce745446/1713388862578/telegram+black.png); background-size: 100%; background-repeat: no-repeat } header#header a.icon[href*="t.me"] svg { display: none; } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
flyturn33 Posted April 22 Author Posted April 22 (edited) thank you, this works except the middle logo is showing the default link icon over the custom icon? Edited April 22 by flyturn33
flyturn33 Posted April 22 Author Posted April 22 also, how can I get the mobile menu drop-down to list the social icons centered like the photo attached? Thanks
flyturn33 Posted April 24 Author Posted April 24 (edited) Any updates on this? Thanks @tuanphan @WCS Edited April 24 by flyturn33
flyturn33 Posted April 26 Author Posted April 26 On 4/22/2024 at 9:30 AM, flyturn33 said: also, how can I get the mobile menu drop-down to list the social icons centered like the photo attached? Thanks i fixed the overlapping icon issue, but haven't figured how to layout the mobile menu like this example image.
flyturn33 Posted April 26 Author Posted April 26 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>
tuanphan Posted April 28 Posted April 28 On 4/22/2024 at 11:26 PM, flyturn33 said: thank you, this works except the middle logo is showing the default link icon over the custom icon? Use this code under header#header a.icon[href*="warpcast"] svg { display: none; } On 4/26/2024 at 9:55 AM, flyturn33 said: i fixed the overlapping icon issue, but haven't figured how to layout the mobile menu like this example image. The site is expired, you can access this link to extend it, then we can check easier. Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment