custom social icons in navagation

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

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

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>

any new insight on this?

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;
}

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

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

Any updates on this? Thanks @tuanphan @WCS

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.

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>

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.