Jump to content

custom social icons in navagation

Recommended Posts

  • Replies 10
  • Views 1.8k
  • Created
  • Last Reply

Top Posters In This Topic

Posted

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

Posted

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>

Posted

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

image.png.927be15b152f573867ea5429ae9ce32c.png

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!)

Posted (edited)

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

Screenshot 2024-04-22 at 9.25.49 AM.png

Edited by flyturn33
Posted
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

Screenshot 2024-04-22 at 9.29.38 AM.png

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

Posted

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>

Posted
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?

Screenshot 2024-04-22 at 9.25.49 AM.png

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!)

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.