Display Tagline On Mobile

• Look Demo
• How To Install
• Customize
• License

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

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

Copy Code

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

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.

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