Display Tagline On Mobile

grey.png

Step One

From your Squarespace account, go to Code Injection: Settings > Advanced > Code Injection

Step Two

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>

Step Three

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.

Save and refresh the page. 👍

Moov Labs