Display Tagline On Mobile

Look Demo

Just like it says – display the website’s tagline on mobile. This plugin uses code injection and works with Squarespace 7.0 (Brine template family).

How To Install

From your Squarespace account, go to Site Code Injection. Copy and paste the code below into the Header Code Injection box.

<!-- Tagline-->
<script
        src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>

<script>
  $(document).ready(function(){
    /*clone the TagLine and add to the mobile branding*/
    $(".Header-tagline").clone().appendTo(".Mobile-bar.Mobile-bar--top .Mobile-bar-branding");
  })
</script>

<style>
  .Mobile-bar.Mobile-bar--top .Mobile-bar-branding .Header-tagline{   
    max-width: 100%;
    padding-top: 5px;
    color: lightgrey;
  }

  .Mobile-bar.Mobile-bar--top {
    padding-top: 10px;  
    padding-bottom: 20px;
  }
</style>

Customize

Change the width, padding, and color values to position and style it to your liking.

Make sure your tagline is enabled on the desktop version of your website. You can find this setting in Site Styles.

License

This plugin comes with an Unlimited Use License. View License Terms