Show Mobile Info Bar on Desktop Version?

Is it possible to show Mobile Info Bar on Desktop? Any CSS tips would be very helpful!

Thanks,

Michael

Also, if anyone knows how to add an additional button to the mobile info bar (an Instagram icon), that would be helpful!

Hi,

What is your site url? Can you take a screenshot of Mobile info bar?

https://www.snydertv.com/

I've attached an example of what the mobile info bar looks like. It's only accessible on the mobile version of Squarespace websites. (It's the bar at the bottom with the call button, email, etc.)

3 hours ago, msnyder said:

https://www.snydertv.com/

 

I've attached an example of what the mobile info bar looks like. It's only accessible on the mobile version of Squarespace websites. (It's the bar at the bottom with the call button, email, etc.)

Hi,
Currently Squarespace doesn't have option to show mobile info bar in desktop, But I can create custom code that shows like mobile info bar for desktop and mobile. If you interested let me know by private message.

On 5/25/2023 at 7:13 AM, msnyder said:

Also, if anyone knows how to add an additional button to the mobile info bar (an Instagram icon), that would be helpful!

Add to Settings > Advanced > Code Injection > Footer

<div class="custom-info-bar yui3-widget sqs-widget sqs-mobile-info-bar sqs-mobile-info-bar-hide"><div class="sqs-mobile-info-bar-content"><div class="sqs-mobile-info-bar-triggers">
    <div class="sqs-mobile-info-bar-trigger" data-type="contactEmail">
      <a href="mailto:michaelsnyder@snydertv.com">
        <span class="sqs-mobile-info-bar-trigger-icon"></span>
        <span class="sqs-mobile-info-bar-trigger-label">Email</span>
      </a>
    </div>
    <div class="sqs-mobile-info-bar-trigger" data-type="contactPhoneNumber">
      <a href="tel:+1 (404) 467-6895">
        <span class="sqs-mobile-info-bar-trigger-icon"></span>
        <span class="sqs-mobile-info-bar-trigger-label">Call</span>
      </a>
    </div>
 <div tabindex="0" role="button" class="sqs-mobile-info-bar-trigger" data-type="location" data-overlay="true">
      <span class="sqs-mobile-info-bar-trigger-icon"></span>
      <span class="sqs-mobile-info-bar-trigger-label">Map</span>
    </div>
</div>

<div class="sqs-mobile-info-bar-overlay" role="dialog" >
  <div tabindex="0" role="button" aria-label="Close" class="sqs-mobile-info-bar-overlay-close">
  </div>
  <div class="sqs-mobile-info-bar-overlay-content"></div>
</div></div></div>
<style>
  @media screen and (max-width:767px) {
    .custom-info-bar {
    	display: none !important;
    }
  }
</style>