<header class="SiteHeader SiteHeader--noNavigation" role="banner">
<div class="SiteHeader-container">
<div class="row _centeritems">
<div class="col _grow js-batip-container">
<a href="/" class="SiteHeader-logo js-headerlogo" title="Sprout Social">
<span class="u-text-screenreader">Sprout Social</span>
<svg id="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 341.6 68" height="40" width="196">
<g class="SiteHeader-logo-leaf">
<path fill="#59cb59" d="M23.4 0C10.5 0 0 10.5 0 23.4v43.1c0 1.4 1.7 2.1 2.6 1.1l12.7-12.7h16.1c12.9 0 23.4-10.5 23.4-23.4V0H23.4z"/>
<path fill="#0ca750" d="M15.4 54.9H3.7l7.3 4.4z"/>
<path fill="#2bb656" d="M54.9 0H23.4v31.5z"/>
<path fill="#0ca750" d="M23.4 0C10.5 0 0 10.5 0 23.4v31.5l23.4-23.4V0z"/>
<path fill="#75dd66" d="M54.9 0L23.4 31.5h31.5z"/>
</g>
<g fill="#364141" class="SiteHeader-logo-word">
<path d="M83.5 44.8c-.8-.5-1.4-1.3-1.4-2.4 0-1.6 1.2-2.8 2.8-2.8.5 0 1 .1 1.4.4 2.4 1.5 4.8 2.2 6.8 2.2 2.1 0 3-.7 3-1.9v-.1c0-1.5-2.4-2.1-5.2-2.9-3.5-1-7.5-2.7-7.5-7.5v-.1c0-5.1 4.1-8 9.2-8 2.6 0 5.3.7 7.8 1.9 1 .5 1.7 1.5 1.7 2.7 0 1.6-1.3 2.8-2.9 2.8-.5 0-.8-.1-1.3-.3-2-1-3.9-1.6-5.4-1.6-1.7 0-2.6.8-2.6 1.7v.1c0 1.4 2.4 2.1 5.1 3 3.5 1.2 7.6 2.9 7.6 7.4v.1c0 5.6-4.2 8.1-9.6 8.1-3.1.1-6.4-.8-9.5-2.8zM125 34.7c0-4.3-2.8-7-6.1-7s-6.1 2.8-6.1 6.9v.1c0 4.2 2.8 6.9 6.1 6.9 3.3.1 6.1-2.7 6.1-6.9zm-19.2-9.3c0-2 1.6-3.6 3.6-3.6s3.6 1.6 3.6 3.6v.3c1.7-2.3 4.1-4.1 7.8-4.1 5.9 0 11.4 4.6 11.4 13v.1c0 8.4-5.5 13-11.4 13-3.8 0-6.1-1.7-7.8-3.7v7.5c0 2-1.6 3.6-3.6 3.6s-3.6-1.6-3.6-3.6V25.4zM172.7 34.8c0-3.8-2.7-7-6.6-7-4.1 0-6.5 3.1-6.5 6.8v.1c0 3.7 2.7 6.9 6.6 6.9 4 .1 6.5-3.1 6.5-6.8zm-20.2 0c0-7.3 5.8-13.2 13.6-13.2s13.5 5.8 13.5 13v.1c0 7.2-5.8 13.1-13.6 13.1-7.7 0-13.5-5.8-13.5-13zM205.9 44c0 2-1.6 3.6-3.6 3.6s-3.6-1.6-3.6-3.6v-.3c-1.6 2.1-3.7 4-7.4 4-5.4 0-8.5-3.6-8.5-9.3v-13c0-2 1.6-3.6 3.6-3.6s3.6 1.6 3.6 3.6v10.7c0 3.4 1.6 5.1 4.3 5.1 2.7 0 4.5-1.7 4.5-5.1V25.4c0-2 1.6-3.6 3.6-3.6s3.6 1.6 3.6 3.6V44h-.1zM209.5 40.1V19c0-2 1.6-3.6 3.6-3.6s3.6 1.6 3.6 3.6v3.1h3.1c1.7 0 3 1.4 3 3 0 1.7-1.4 3-3 3h-3.1v10.7c0 1.6.7 2.4 2.3 2.4h.8c1.6 0 3 1.3 3 3 0 1.3-.8 2.3-1.8 2.7-1.3.5-2.5.7-4.1.7-4.4.1-7.4-1.7-7.4-7.5zM237.6 47.7c-3.5 0-7.3-1.4-10-3.6l1.8-2.6c2.6 2 5.5 3.1 8.4 3.1 2.9 0 5-1.5 5-3.8v-.1c0-2.4-2.9-3.4-6-4.3-3.8-1.1-8-2.4-8-6.8v-.1c0-4.2 3.5-6.9 8.2-6.9 3 0 6.2 1 8.7 2.7l-1.6 2.7c-2.2-1.5-4.8-2.3-7.2-2.3-2.9 0-4.7 1.5-4.7 3.5v.1c0 2.3 3 3.2 6.2 4.2 3.7 1.1 7.8 2.6 7.8 6.9v.1c0 4.5-3.8 7.2-8.6 7.2zM261.7 25.7c-5.3 0-8.9 4.2-8.9 9.4 0 5.3 3.8 9.5 8.9 9.5 5.2 0 8.9-4.2 8.9-9.4 0-5.3-3.8-9.5-8.9-9.5zm0 22.1c-7.3 0-12.6-5.7-12.6-12.6 0-6.9 5.3-12.7 12.7-12.7 7.3 0 12.6 5.7 12.6 12.6 0 6.9-5.4 12.7-12.7 12.7zM289.4 47.8c-7.1 0-12.4-5.8-12.4-12.6 0-6.9 5.3-12.7 12.4-12.7 4.6 0 7.5 1.9 9.7 4.3l-2.4 2.5c-1.9-2-4.1-3.7-7.4-3.7-4.9 0-8.7 4.2-8.7 9.4 0 5.3 3.8 9.5 8.9 9.5 3.1 0 5.5-1.5 7.4-3.6l2.3 2.2c-2.3 2.7-5.2 4.7-9.8 4.7zM303.3 47.2V23h3.6v24.2h-3.6zm-.3-29.5v-4h4.1v4H303zM314.7 40c0 3.1 2.8 4.9 6.1 4.9 4.5 0 8.1-2.7 8.1-6.6V36c-1.8-.5-4.2-1-7.1-1-4.5 0-7.1 1.9-7.1 5zm-.4-12.4l-1.1-3c2.7-1.2 5.3-2 8.8-2 6.6 0 10.3 3.4 10.3 9.7v14.8h-3.5v-3.7c-1.7 2.2-4.5 4.2-8.8 4.2-4.5 0-9-2.5-9-7.6 0-5.2 4.2-7.9 10.4-7.9 3.1 0 5.3.4 7.5 1v-.8c0-4.4-2.7-6.6-7.2-6.6-2.9.2-5.1.9-7.4 1.9zM338 47.2V13h3.6v34.2H338zM155.1 19.7s-3.1 1.4-5.8 1.3c-2.6-.1-3.9 1.3-3.9 1.3-1.1.8-2 2.2-2.7 3.7v-.7c0-2-1.6-3.6-3.6-3.6s-3.6 1.6-3.6 3.6V44c0 2 1.6 3.6 3.6 3.6s3.6-1.6 3.6-3.6v-8.8c.5-3.8 2.4-5.9 5.5-6.6.2 0 .3-.1.5-.2 7.2-2.1 6.4-8.7 6.4-8.7z"/>
</g>
</svg>
</a>
</div>
</div>
</div>
</header>
{{#if static}}
<header class="SiteHeader {{#unless disablescroll}}js-header{{/unless}} {{modifier}} {{#if showlanguagepicker}}has-languagepicker{{/if}} {{#unless shownavigation}}SiteHeader--noNavigation{{/unless}}" role="banner">
{{#if skiplink}}
<a href="#content" class="u-text-screenreader">Skip to main content</a>
{{/if}}
<div class="SiteHeader-container">
<div class="row _centeritems">
{{#if showlogo}}
<div class="col _grow js-batip-container">
<a href="/"
class="SiteHeader-logo js-headerlogo"
title="Sprout Social">
<span class="u-text-screenreader">Sprout Social</span>
<svg id="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 341.6 68" height="40" width="196">
<g class="SiteHeader-logo-leaf">
<path fill="#59cb59" d="M23.4 0C10.5 0 0 10.5 0 23.4v43.1c0 1.4 1.7 2.1 2.6 1.1l12.7-12.7h16.1c12.9 0 23.4-10.5 23.4-23.4V0H23.4z"/>
<path fill="#0ca750" d="M15.4 54.9H3.7l7.3 4.4z"/>
<path fill="#2bb656" d="M54.9 0H23.4v31.5z"/>
<path fill="#0ca750" d="M23.4 0C10.5 0 0 10.5 0 23.4v31.5l23.4-23.4V0z"/>
<path fill="#75dd66" d="M54.9 0L23.4 31.5h31.5z"/>
</g>
<g fill="#364141" class="SiteHeader-logo-word">
<path d="M83.5 44.8c-.8-.5-1.4-1.3-1.4-2.4 0-1.6 1.2-2.8 2.8-2.8.5 0 1 .1 1.4.4 2.4 1.5 4.8 2.2 6.8 2.2 2.1 0 3-.7 3-1.9v-.1c0-1.5-2.4-2.1-5.2-2.9-3.5-1-7.5-2.7-7.5-7.5v-.1c0-5.1 4.1-8 9.2-8 2.6 0 5.3.7 7.8 1.9 1 .5 1.7 1.5 1.7 2.7 0 1.6-1.3 2.8-2.9 2.8-.5 0-.8-.1-1.3-.3-2-1-3.9-1.6-5.4-1.6-1.7 0-2.6.8-2.6 1.7v.1c0 1.4 2.4 2.1 5.1 3 3.5 1.2 7.6 2.9 7.6 7.4v.1c0 5.6-4.2 8.1-9.6 8.1-3.1.1-6.4-.8-9.5-2.8zM125 34.7c0-4.3-2.8-7-6.1-7s-6.1 2.8-6.1 6.9v.1c0 4.2 2.8 6.9 6.1 6.9 3.3.1 6.1-2.7 6.1-6.9zm-19.2-9.3c0-2 1.6-3.6 3.6-3.6s3.6 1.6 3.6 3.6v.3c1.7-2.3 4.1-4.1 7.8-4.1 5.9 0 11.4 4.6 11.4 13v.1c0 8.4-5.5 13-11.4 13-3.8 0-6.1-1.7-7.8-3.7v7.5c0 2-1.6 3.6-3.6 3.6s-3.6-1.6-3.6-3.6V25.4zM172.7 34.8c0-3.8-2.7-7-6.6-7-4.1 0-6.5 3.1-6.5 6.8v.1c0 3.7 2.7 6.9 6.6 6.9 4 .1 6.5-3.1 6.5-6.8zm-20.2 0c0-7.3 5.8-13.2 13.6-13.2s13.5 5.8 13.5 13v.1c0 7.2-5.8 13.1-13.6 13.1-7.7 0-13.5-5.8-13.5-13zM205.9 44c0 2-1.6 3.6-3.6 3.6s-3.6-1.6-3.6-3.6v-.3c-1.6 2.1-3.7 4-7.4 4-5.4 0-8.5-3.6-8.5-9.3v-13c0-2 1.6-3.6 3.6-3.6s3.6 1.6 3.6 3.6v10.7c0 3.4 1.6 5.1 4.3 5.1 2.7 0 4.5-1.7 4.5-5.1V25.4c0-2 1.6-3.6 3.6-3.6s3.6 1.6 3.6 3.6V44h-.1zM209.5 40.1V19c0-2 1.6-3.6 3.6-3.6s3.6 1.6 3.6 3.6v3.1h3.1c1.7 0 3 1.4 3 3 0 1.7-1.4 3-3 3h-3.1v10.7c0 1.6.7 2.4 2.3 2.4h.8c1.6 0 3 1.3 3 3 0 1.3-.8 2.3-1.8 2.7-1.3.5-2.5.7-4.1.7-4.4.1-7.4-1.7-7.4-7.5zM237.6 47.7c-3.5 0-7.3-1.4-10-3.6l1.8-2.6c2.6 2 5.5 3.1 8.4 3.1 2.9 0 5-1.5 5-3.8v-.1c0-2.4-2.9-3.4-6-4.3-3.8-1.1-8-2.4-8-6.8v-.1c0-4.2 3.5-6.9 8.2-6.9 3 0 6.2 1 8.7 2.7l-1.6 2.7c-2.2-1.5-4.8-2.3-7.2-2.3-2.9 0-4.7 1.5-4.7 3.5v.1c0 2.3 3 3.2 6.2 4.2 3.7 1.1 7.8 2.6 7.8 6.9v.1c0 4.5-3.8 7.2-8.6 7.2zM261.7 25.7c-5.3 0-8.9 4.2-8.9 9.4 0 5.3 3.8 9.5 8.9 9.5 5.2 0 8.9-4.2 8.9-9.4 0-5.3-3.8-9.5-8.9-9.5zm0 22.1c-7.3 0-12.6-5.7-12.6-12.6 0-6.9 5.3-12.7 12.7-12.7 7.3 0 12.6 5.7 12.6 12.6 0 6.9-5.4 12.7-12.7 12.7zM289.4 47.8c-7.1 0-12.4-5.8-12.4-12.6 0-6.9 5.3-12.7 12.4-12.7 4.6 0 7.5 1.9 9.7 4.3l-2.4 2.5c-1.9-2-4.1-3.7-7.4-3.7-4.9 0-8.7 4.2-8.7 9.4 0 5.3 3.8 9.5 8.9 9.5 3.1 0 5.5-1.5 7.4-3.6l2.3 2.2c-2.3 2.7-5.2 4.7-9.8 4.7zM303.3 47.2V23h3.6v24.2h-3.6zm-.3-29.5v-4h4.1v4H303zM314.7 40c0 3.1 2.8 4.9 6.1 4.9 4.5 0 8.1-2.7 8.1-6.6V36c-1.8-.5-4.2-1-7.1-1-4.5 0-7.1 1.9-7.1 5zm-.4-12.4l-1.1-3c2.7-1.2 5.3-2 8.8-2 6.6 0 10.3 3.4 10.3 9.7v14.8h-3.5v-3.7c-1.7 2.2-4.5 4.2-8.8 4.2-4.5 0-9-2.5-9-7.6 0-5.2 4.2-7.9 10.4-7.9 3.1 0 5.3.4 7.5 1v-.8c0-4.4-2.7-6.6-7.2-6.6-2.9.2-5.1.9-7.4 1.9zM338 47.2V13h3.6v34.2H338zM155.1 19.7s-3.1 1.4-5.8 1.3c-2.6-.1-3.9 1.3-3.9 1.3-1.1.8-2 2.2-2.7 3.7v-.7c0-2-1.6-3.6-3.6-3.6s-3.6 1.6-3.6 3.6V44c0 2 1.6 3.6 3.6 3.6s3.6-1.6 3.6-3.6v-8.8c.5-3.8 2.4-5.9 5.5-6.6.2 0 .3-.1.5-.2 7.2-2.1 6.4-8.7 6.4-8.7z"/>
</g>
</svg>
</a>
</div>
{{/if}}
{{#if shownavigation}}
<div class="col _grow">
<nav class="SiteHeader-nav js-headernav"
role="navigation"
itemscope
itemtype="http://schema.org/SiteNavigationElement"
>
{{#if landing}}
<ul>
<li>
<a itemprop="url" href="/pricing/">
<span itemprop="name">Pricing</span>
</a>
</li>
<li>
<a itemprop="url" href="/enterprise/">
<span itemprop="name">Enterprise</span>
</a>
</li>
<li>
<a itemprop="url" href="/agencies/">
<span itemprop="name">Agencies</span>
</a>
</li>
<li>
<a itemprop="url" href="/small-business/">
<span itemprop="name">Small Business</span>
</a>
</li>
</ul>
{{else}}
<ul>
<li>
<a href="/small-business/"
class="js-navigationlink"
data-navigation-target="#navigation-solutions"
>
Solutions
</a>
<div id="navigation-solutions"
class="SiteHeader-secondarynav js-secondarynav"
aria-hidden="true"
aria-label="Solutions submenu"
>
<div class="SiteHeader-secondarynavcontainer">
<div class="row">
<div class="col _span-12">
<div id="navigation-solutions-header" class="SiteHeader-secondarynav-heading u-text-size-200 u-text-spacedout">
Solutions
</div>
</div>
</div>
<div class="row iconlist"
role="list"
aria-labelledby="navigation-solutions-header"
>
<div class="col _span-4" role="listitem">
<a href="/enterprise/"
class="iconlist-item _circle icon _building-enterprise _before"
tabindex="-1"
itemprop="url"
>
<div class="text">
<p class="icon _arrow _after spacedout">For <span itemprop="name">Enterprise</span></p>
<span class="subtitle">Enterprise platform for large social business teams.</span>
</div>
</a>
</div>
<div class="col _span-4" role="listitem">
<a href="/agencies/"
class="iconlist-item _circle icon _building-agency _before"
tabindex="-1"
itemprop="url"
>
<div class="text">
<p class="icon _arrow _after spacedout">For <span itemprop="name">Agencies</span></p>
<span class="subtitle">Flexible social software built for the agency model.</span>
</div>
</a>
</div>
<div class="col _span-4" role="listitem">
<a href="/small-business/"
class="iconlist-item _circle icon _building-small-business _before"
tabindex="-1"
itemprop="url"
>
<div class="text">
<p class="icon _arrow _after spacedout">For <span itemprop="name">Small Business</span></p>
<span class="subtitle">Tools to save time and manage social business.</span>
</div>
</a>
</div>
</div>
<div class="row iconlist"
role="list"
aria-labelledby="navigation-solutions-header"
>
<div class="col _span-4" role="listitem">
<a href="/social-media-management/"
class="iconlist-item _circle icon _monitoring _before"
tabindex="-1"
itemprop="url"
>
<div class="text">
<p class="icon _arrow _after spacedout">For <span itemprop="name">Social Media Management</span></p>
<span class="subtitle">Tools to effectively manage your social presence.</span>
</div>
</a>
</div>
<div class="col _span-4" role="listitem">
<a href="/social-customer-service/"
class="iconlist-item _circle icon _support _before"
tabindex="-1"
itemprop="url"
>
<div class="text">
<p class="icon _arrow _after spacedout">For <span itemprop="name">Customer Service</span></p>
<span class="subtitle">Tools to build relationships through customer care.</span>
</div>
</a>
</div>
<div class="col _span-4" role="listitem">
<a href="/social-media-marketing/"
class="iconlist-item _circle icon _analytics _before"
tabindex="-1"
itemprop="url"
>
<div class="text">
<p class="icon _arrow _after spacedout">For <span itemprop="name">Social Media Marketing</span></p>
<span class="subtitle">Tools to reach your audience and track growth.</span>
</div>
</a>
</div>
</div>
</div>
</div>
</li>
<li>
<a href="/features/social-media-analytics/"
class="js-navigationlink"
data-navigation-target="#navigation-platform"
>
Platform
</a>
<div id="navigation-platform"
class="SiteHeader-secondarynav js-secondarynav"
aria-hidden="true"
aria-label="Platform submenu"
>
<div class="SiteHeader-secondarynavcontainer">
<div class="row">
<div class="col _span-7">
<div id="navigation-platform-features-header" class="SiteHeader-secondarynav-heading u-text-size-200 u-text-spacedout">
Features
</div>
<div class="row">
<div class="col _span-7">
<div class="iconlist"
role="list"
aria-labelledby="navigation-platform-features-header"
>
<a href="/features/social-media-analytics/"
class="iconlist-item _circle icon _analytics _before"
tabindex="-1"
role="listitem"
itemprop="url"
>
<div class="text">
<p class="icon _arrow _after spacedout" itemprop="name">Analytics</p>
<span class="subtitle">Measure and report with powerful social data.</span>
</div>
</a>
<a href="/features/social-media-engagement/"
class="iconlist-item _circle icon _engagement-heart _before"
tabindex="-1"
role="listitem"
itemprop="url"
>
<div class="text">
<p class="icon _arrow _after spacedout" itemprop="name">Engagement</p>
<span class="subtitle">Monitor and engage with social conversations.</span>
</div>
</a>
<a href="/features/social-media-publishing/"
class="iconlist-item _circle icon _publishing-plane _before"
tabindex="-1"
role="listitem"
itemprop="url"
>
<div class="text">
<p class="icon _arrow _after spacedout" itemprop="name">Publishing</p>
<span class="subtitle">Plan, schedule and post across social networks.</span>
</div>
</a>
</div>
</div>
<div class="col _span-5">
<ul aria-labelledby="navigation-platform-features-header">
<li>
<a href="/features/team-collaboration/"
class="icon _arrow _after"
tabindex="-1"
itemprop="url"
>
<span itemprop="name">Collaboration</span>
</a>
</li>
<li>
<a href="/features/flexible-account-structure/"
class="icon _arrow _after"
tabindex="-1"
itemprop="url"
>
<span itemprop="name">Account Structure</span>
</a>
</li>
<li>
<a href="/features/social-media-automation/"
class="icon _arrow _after"
tabindex="-1"
itemprop="url"
>
<span itemprop="name">Automation</span>
</a>
</li>
<li>
<a href="/features/social-media-crm/"
class="icon _arrow _after"
tabindex="-1"
itemprop="url"
>
<span itemprop="name">Social CRM</span>
</a>
</li>
<li>
<a href="/features/social-media-monitoring/"
class="icon _arrow _after"
tabindex="-1"
itemprop="url"
>
<span itemprop="name">Monitoring</span>
</a>
</li>
<li>
<a href="/features/social-media-listening/"
class="icon _arrow _after"
tabindex="-1"
itemprop="url"
>
<span itemprop="name">Listening</span>
</a>
</li>
<li>
<a href="/features/mobile-apps/"
class="icon _arrow _after"
tabindex="-1"
itemprop="url"
>
<span itemprop="name">Mobile</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="col _span-5">
<div id="navigation-platform-networks-header" class="SiteHeader-secondarynav-heading u-text-size-200 u-text-spacedout">
Networks/ Integrations
</div>
<div class="iconlist row"
role="list"
aria-labelledby="navigation-platform-networks-header"
>
<div class="col _span-6" role="listitem">
<a href="/integrations/twitter/"
class="iconlist-item _circle _small icon _twitter _before"
tabindex="-1"
itemprop="url"
>
<div class="text">
<p class="icon _arrow _after spacedout" itemprop="name">Twitter</p>
</div>
</a>
<a href="/integrations/instagram/"
class="iconlist-item _circle _small icon _instagram _before"
tabindex="-1"
itemprop="url"
>
<div class="text">
<p class="icon _arrow _after spacedout" itemprop="name">Instagram</p>
</div>
</a>
<a href="/integrations/google-plus/"
class="iconlist-item _circle _small icon _googleplus _before"
tabindex="-1"
itemprop="url"
>
<div class="text">
<p class="icon _arrow _after spacedout" itemprop="name">Google+</p>
</div>
</a>
</div>
<div class="col _span-6" role="listitem">
<a href="/integrations/facebook/"
class="iconlist-item _circle _small icon _facebook _before"
tabindex="-1"
itemprop="url"
>
<div class="text">
<p class="icon _arrow _after spacedout" itemprop="name">Facebook</p>
</div>
</a>
<a href="/integrations/linkedin/"
class="iconlist-item _circle _small icon _linkedin _before"
tabindex="-1"
itemprop="url"
>
<div class="text">
<p class="icon _arrow _after spacedout" itemprop="name">LinkedIn</p>
</div>
</a>
<a href="/integrations/"
class="iconlist-item _circle _small icon _more-dots _before"
tabindex="-1"
itemprop="url"
>
<div class="text">
<p class="icon _arrow _after spacedout" itemprop="name">Other Integrations</p>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</li>
<li>
<a href="/pricing/" itemprop="url">
<span itemprop="name">Pricing</span>
</a>
</li>
<li>
<a href="/about/"
class="js-navigationlink"
data-navigation-target="#navigation-about"
>
About
</a>
<div id="navigation-about"
class="SiteHeader-secondarynav js-secondarynav"
aria-hidden="true"
aria-label="About submenu"
>
<div class="SiteHeader-secondarynavcontainer">
<div class="row">
<div class="col _span-4">
<div id="navigation-about-header" class="SiteHeader-secondarynav-heading u-text-size-200 u-text-spacedout">
About Sprout
</div>
<div class="iconlist"
role="list"
aria-labelledby="navigation-about-header"
>
<a href="/customers"
class="iconlist-item _circle icon _agency-team _before"
tabindex="-1"
role="listitem"
itemprop="url"
>
<div class="text">
<p class="icon _arrow _after spacedout" itemprop="name">Customers</p>
<span class="subtitle">More than {{customercount}} brands use Sprout. Here’s why.</span>
</div>
</a>
<a href="/about/"
class="iconlist-item _circle icon _hierarchy _before"
tabindex="-1"
role="listitem"
itemprop="url"
>
<div class="text">
<p class="icon _arrow _after spacedout" itemprop="name">Company</p>
<span class="subtitle">Who we are, what we do and why it matters.</span>
</div>
</a>
<a href="/careers/"
class="iconlist-item _circle icon _career _before"
tabindex="-1"
role="listitem"
itemprop="url"
>
<div class="text">
<p class="icon _arrow _after spacedout" itemprop="name">Careers</p>
<span class="subtitle">Our Team is smart, thoughtful and fun. Join us.</span>
</div>
</a>
</div>
</div>
<div class="col _span-4">
<div id="navigation-about-news-header" class="SiteHeader-secondarynav-heading u-text-size-200 u-text-spacedout">
News & Content
</div>
<div class="iconlist"
role="list"
aria-labelledby="navigation-about-news-header"
>
<a href="/insights/"
class="iconlist-item _circle icon _feeds _before SL_norewrite"
tabindex="-1"
role="listitem"
itemprop="url"
>
<div class="text">
<p class="icon _arrow _after spacedout" itemprop="name">Blog</p>
<span class="subtitle">Our latest tips, expert insights and product updates.</span>
</div>
</a>
<a href="/insights/resources/"
class="iconlist-item _circle icon _resources _before SL_norewrite"
tabindex="-1"
role="listitem"
itemprop="url"
>
<div class="text">
<p class="icon _arrow _after spacedout" itemprop="name">Resources</p>
<span class="subtitle">Guides and studies to help build a social strategy.</span>
</div>
</a>
<a href="/faq/"
class="iconlist-item _circle icon _question-mark _before"
tabindex="-1"
role="listitem"
itemprop="url"
>
<div class="text">
<p class="icon _arrow _after spacedout" itemprop="name">Frequently Asked Questions</p>
<span class="subtitle">Answers to all your questions about Sprout.</span>
</div>
</a>
</div>
</div>
<div class="col _span-4">
<div id="navigation-about-tools-header" class="SiteHeader-secondarynav-heading u-text-size-200 u-text-spacedout">
Tools
</div>
<div class="iconlist"
role="list"
aria-labelledby="navigation-about-tools-header"
>
<a href="https://getbambu.com/"
target="_blank"
rel="noopener noreferrer"
class="iconlist-item _circle icon _bambu _before"
tabindex="-1"
role="listitem"
itemprop="url"
>
<div class="text">
<p class="icon _arrow _after spacedout" itemprop="name">Bambu</p>
<span class="subtitle">Sprout’s employee advocacy platform.</span>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</li>
{{#if showlogin}}
<li>
<a href="https://app.sproutsocial.com/dashboard" class="_gray" itemprop="url">
<span itemprop="name">Log In</span>
</a>
</li>
{{/if}}
</ul>
{{/if}}
</nav>
</div>
{{/if}}
{{#if showcta}}
<div class="SiteHeader-cta col _shrink">
{{#if showlanguagepicker}}
<form class="SiteHeader-languagepicker" action="#">
<label>
<select name="lang" id="lang" onchange="self.location=this.options[this.selectedIndex].value">
<option value="#" disabled selected>Language</option>
<option class="SL_norewrite" value="{{#if page.path}}{{{page.path}}}{{else}}/{{/if}}">English</option>
<option class="SL_norewrite" value="/es{{#if page.path}}{{{page.path}}}{{else}}/{{/if}}">Spanish</option>
<option class="SL_norewrite" value="/pt{{#if page.path}}{{{page.path}}}{{else}}/{{/if}}">Português</option>
</select>
</label>
</form>
{{/if}}
{{#if customctalink}}
<a href="{{customctalink}}" class="button _secondary js-track__topNavCTA">{{customctatext}}</a>
{{else}}
<a href="/pricing/" class="button _secondary js-track__topNavCTA">Start Your Free Trial</a>
{{/if}}
</div>
{{/if}}
{{#if showlogin}}
<div class="SiteHeader-login col _grow">
<a href="https://app.sproutsocial.com/dashboard" class="_gray">Log In</a>
{{#if showmobilenav}}
<button type="button" class="button _mobile-toggle {{#if drawermenu}}js-drawer-open{{else}}js-openmenu{{/if}}">
<span class="u-text-screenreader">Menu</span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</button>
{{/if}}
</div>
{{/if}}
</div>
</div>
</header>
{{else}}
<header class="SiteHeader {{modifier}} js-header" role="banner">
{{> @children}}
</header>
{{/if}}
{
"static": true,
"landing": null,
"skiplink": null,
"showcta": null,
"customctalink": null,
"customctatext": null,
"showlanguagepicker": null,
"showlogin": null,
"shownavigation": null,
"showlogo": true,
"showmobilenav": null,
"drawermenu": null,
"disablescroll": true,
"customercount": "24,000"
}
import '../../../modules/polyfills/closest';
import each from '../../../modules/util/each';
import ready from '../../../modules/util/ready';
import toggleSlide from '@sproutsocial/sprout-brand/modules/toggle-slide';
import jsClasses from '../../../constants/js-classes';
ready(function() {
var doc = document.documentElement;
var navbar = document.querySelector(jsClasses.SITEHEADER);
var body = document.body;
/*
* toggleSecondaryNavigation() is a function when a user clicks a navigation item
* that contains a secondary navigation will handle the hiding and showing as well as making
* sure that no other navigation menus are open
*/
function toggleSecondaryNavigation(event) {
event.preventDefault();
// Each time this function is ran we want to create our global variables for the function
// and query the targeted secondary navigation
var secondaryNavLink = this;
var secondaryNavLinkTarget = secondaryNavLink.getAttribute('data-navigation-target');
var secondaryNav = document.querySelector(secondaryNavLinkTarget);
// navIsOpen will be used and changed throughout for checking if a secondary navigation is open
var navIsOpen = false;
// Every time this function is ran we will check to see if one of the navigation links in the main
// navigation are active, and if so then make navIsOpen true
each(navigationLinks, function(el) {
if (el.classList.contains('is-active')) {
navIsOpen = true;
}
});
/*
* openNavigation() is a function that adds an active class to the clicked navigation item,
* then toggles the slide animation for the secondary navigation as well as adding an `.is-open` class
* to the navigation and a `.is-expanded` class to the entire header
*/
function openNavigation() {
secondaryNavLink.classList.add('is-active');
secondaryNav.classList.add('is-open');
secondaryNav.setAttribute('aria-hidden', false);
navbar.classList.add('is-expanded');
// We will also want to make sure our navIsOpen is true
each(secondaryNav.querySelectorAll('a'), function(el) {
el.setAttribute('tabindex', '0');
});
// Focus on first link inside of navigation
secondaryNav.querySelector('a').focus();
navIsOpen = true;
}
/*
* closeNavigation() is a function that queries the opened secondary navigation, removes the active
* class from the navigation link that's currently active, sets a max height of 0 on the currently open
* secondary navigation, removes the `.is-open` class from itself, and removes the `.is-expanded`
* from the header. We then run a 1 time function that runs our whichTransitionEvent() which tells us when
* our animation on the secondary navigation has ended and then sets navIsOpen to false
*/
function closeNavigation() {
var openSecondaryNav = document.querySelector(`${jsClasses.SECONDARNAV}.is-open`);
if (openSecondaryNav) {
navbar.querySelector(`${jsClasses.NAVIGATIONLINK}.is-active`).classList.remove('is-active');
navbar.classList.remove('is-expanded');
openSecondaryNav.classList.remove('is-open');
openSecondaryNav.setAttribute('aria-hidden', false);
each(openSecondaryNav.querySelectorAll('a'), function(el) {
el.setAttribute('tabindex', '-1');
});
navIsOpen = false;
}
}
// If a user presses the escape key lets close the navigation and focus the last clicked link
navbar.addEventListener('keydown', e => {
if (e.keyCode == 27) {
closeNavigation();
secondaryNavLink.focus();
}
});
// Initially if the clicked link is active we want to remove the active state and close
// the navigation. The next check we make is if there is an active/ open navigation at all.
// In that case we want to close the currently active/ open nav and then once that's finished
// we want to add an active class and open the intended navigation. The last check is if there
// is no active state, in that case just add an active class and open its navigation
if (secondaryNavLink.classList.contains('is-active')) {
closeNavigation();
} else if (navIsOpen === true) {
closeNavigation();
// This setInterval is a safety precaution as navIsOpen could still possibly be true after
// running closeNavigation(), the openNaviation() will only run once with that check to make
// sure navIsOpen is false
setInterval(function() {
if (navIsOpen === false) {
openNavigation();
}
}, 20);
} else {
openNavigation();
}
}
var navigationLinks = document.querySelectorAll(jsClasses.NAVIGATIONLINK);
if (navigationLinks) {
each(navigationLinks, function(el) {
el.setAttribute('aria-haspopup', true); // Add ARIA label as the sub navigation is an enhancement for JS
el.addEventListener('click', toggleSecondaryNavigation);
});
}
/*
* navbarScroll() is a function that adds an `.is-scrolled` class when a user
* scrolls the Page element
*/
function navbarScroll() {
var scrollTop = window.pageYOffset || document.documentElement.scrollTop || body.scrollTop;
if (scrollTop <= 5) {
navbar.classList.remove('is-scrolled');
} else {
navbar.classList.add('is-scrolled');
}
}
if (body && navbar) {
window.addEventListener('scroll', navbarScroll);
}
/*
* openMenu() is a function that shows the mobile navigation
*/
function openMenu() {
doc.classList.add('Sidebar-menu-open');
// var swipeGesture = new Hammer(document.body);
// swipeGesture.on('swipe', function() {
// closeMenu();
// });
}
/*
* closeMenu() is a function that hides the mobile navigation
*/
function closeMenu() {
doc.classList.remove('Sidebar-menu-open');
}
each(document.querySelectorAll(jsClasses.MENU_OPEN), function(el) {
el.addEventListener('click', openMenu);
});
each(document.querySelectorAll(jsClasses.MENU_CLOSE), function(el) {
el.addEventListener('click', closeMenu);
});
/*
* mobileNavLinkToggle() is a function that when a user clicks a button in the mobile
* navigation that has a nested navigation it will toggle an active class on the button's
* parent and show or hide the secondary list with CSS
*/
function mobileNavLinkToggle(event) {
event.preventDefault();
const button = event.currentTarget;
each(button.closest('.Nav').querySelectorAll('.is-active'), el => {
el.classList.remove('is-active');
});
button.classList.add('is-active');
toggleSlide(button.parentNode.querySelector('ul'));
}
var mobileNavigationLink = document.querySelectorAll(jsClasses.MOBILENAVLINK);
if (mobileNavigationLink) {
each(mobileNavigationLink, function(el) {
el.addEventListener('click', mobileNavLinkToggle);
});
}
/*
* openBatip() is a function that runs when a user right clicks on the navigation logo and will create a `.batip` element that asks them if they want the logo to navigate to our brand assets page
*/
function openBatip(event) {
event.preventDefault();
// Check to make sure it doesn't already exist
if (!navbar.querySelector('.batip')) {
// First create the HTML element and add a `.batip` class to it
var batip = document.createElement('div');
batip.classList.add('batip');
// Add the innerHTML that contains links to the brand assets page
batip.innerHTML =
`<button type="button" class="IconButton ${jsClasses.BATIP_CLOSE.slice(
1
)}" style="padding: 0; margin: 0; text-align: right;">×</button>` +
'<h5 class="title" style="margin-top: .75rem;">Looking for our high-res logo?</h5>' +
'<p class="description">Check out our <a href="http://sproutsocial.com/brand-assets" class="link">Brand Assets</a> page.</p>' +
'<a href="http://sproutsocial.com/brand-assets" class="button _small" style="color: #fff;">Get our Logo</a>';
// Add some extra styling that includes position and making it visible
batip.style.display = 'block';
// Attach the element to the navigation bar and create an event listener to allow the user to close it using the `closeBatip()` function
var batipContainer = navbar.querySelector(jsClasses.BATIP_CONTAINER);
if (batipContainer) {
batipContainer.style.position = 'relative';
batipContainer.insertAdjacentHTML('afterbegin', batip.outerHTML);
navbar.querySelector(jsClasses.BATIP_CLOSE).addEventListener('click', closeBatip);
}
}
}
/*
* closeBatip() is a function when a user clicks a `.js-closeBatip` that exists when a `.batip` element is created will then destroy that node
*/
function closeBatip(event) {
event.preventDefault();
var batip = navbar.querySelector('.batip');
batip.parentNode.removeChild(batip);
}
var headerLogo = document.querySelector(jsClasses.HEADERLOGO);
if (headerLogo) {
headerLogo.addEventListener('contextmenu', openBatip);
}
});
// SiteHeader
//
// This is the header, there are many like it, but this one is ours. SiteHeader does need to be placed inside of the `.Page` pattern in order to work with the "fixed" scrolling.
.SiteHeader {
@include navigation-bar;
.col + .col {
margin-top: 0;
}
a._gray {
color: get-color(neutral, 500);
}
&-logo {
display: inline-block;
padding: Space(200) 0;
&-word {
opacity: 1;
transition: opacity $transition-time-300 $transition-in-default;
}
svg {
vertical-align: middle;
}
}
&-cta {
display: none;
}
&-cta._visible {
display: block;
margin-left: auto;
}
&-languagepicker {
@include font-size-fine;
position: absolute;
top: Space(300);
right: Space(400);
color: get-color(neutral, 900);
text-align: right;
&::after {
position: absolute;
top: Space(100);
right: 0;
content: "â–¾";
}
select {
padding: Space(200) Space(400);
appearance: none;
background: none;
border: none;
box-shadow: none;
&:focus {
outline: none;
}
}
select::-ms-expand {
// Removes the arrow that internet explorer adds
display: none;
}
}
&-login {
@include spaced-out;
margin-left: auto;
text-align: right;
> * {
display: inline-block;
vertical-align: middle;
}
a {
display: none;
padding: .5rem;
}
.button._mobile-toggle {
@include button-color(get-color(neutral, 500), transparent, transparent);
min-width: 0;
padding: .5rem;
margin: 0;
.line {
position: relative;
display: block;
width: 1.5rem;
height: 3px;
background: get-color(neutral, 500);
+ .line {
margin-top: 3px;
}
}
}
}
&-menuicon {
display: inline-block;
vertical-align: middle;
appearance: none;
background: none;
border: none;
svg {
display: block;
width: 30px;
height: 30px;
}
}
&-nav {
@include navigation-menu;
@include spaced-out;
@include font-size-fine;
display: none;
margin-left: auto;
}
&-secondarynav {
@include BoxShadow("Navbar");
@include font-size-fine;
position: absolute;
right: 0;
left: 0;
z-index: -1;
background-color: theme-color(background);
opacity: 0;
transition: transform $transition-time-500 $transition-move-default, opacity $transition-time-200 $transition-out-default $transition-time-500;
transform: translateY(-100%); // To move the navigation off canvas
&.is-open {
opacity: 1;
transition-delay: 0s;
transform: translateY(0);
}
a {
display: block;
color: theme-color(text, dark);
&:focus,
&:hover {
color: theme-color(link);
}
}
ul {
@include unstyled-list;
@include spaced-out;
@include font-size-fine;
padding-top: .75rem;
li + li {
margin-top: 1.15rem;
}
}
.row + .row {
margin-top: 1.5rem;
}
& &-heading {
padding-top: 0;
padding-bottom: 0;
margin-bottom: 1.5rem;
color: get-color(neutral, 500);
}
.iconlist-item {
width: 100%;
h4 {
@include font-size-fine;
@include spaced-out;
padding: 0;
margin: 0;
}
.subtitle {
@include font-size-fine;
margin-top: 0;
}
.icon._arrow {
width: auto;
flex: 0;
font-size: inherit;
color: inherit;
text-align: left;
visibility: visible;
}
&:focus,
&:hover {
outline: 0;
h4 {
color: theme-color(link);
}
.subtitle {
color: theme-color(text, dark);
}
&::before {
@include circle-color($background: theme-color(main), $color: get-color(neutral, 0));
}
}
}
.iconlist-item,
.iconlist-item h4 {
@include font-size-fine;
}
.icon._arrow::after {
display: none;
margin-left: 6px;
font-size: .5rem;
transform: translateY(-2px); // To better align with the navigation item
}
}
&-secondarynavcontainer {
padding: 1.5rem 0;
}
}
.SiteHeader._small {
.icon._twitterofficial {
@include font-size-head-small;
}
.icon._twitterofficial,
.icon._twitterofficial::before {
display: block;
}
}
.SiteHeader._transparent,
.SiteHeader._filled {
a:focus,
a:hover {
text-decoration: none;
}
.SiteHeader-container {
padding: .5rem 0;
}
.SiteHeader-nav > ul > li {
padding: 1.5rem 0;
> a {
padding: .25rem 0;
}
}
}
.SiteHeader._transparent {
background: transparent;
.button._link {
color: get-color(neutral, 100);
&:focus,
&:hover {
color: get-color(neutral, 0);
}
}
.SiteHeader-cta .button._secondary {
@include button-color(
$button-text-color: get-color(neutral, 0),
$button-text-color-hover: get-color(neutral, 0),
$button-background-color: transparent,
$button-background-color-hover: theme-color(main),
$button-border-color: get-color(neutral, 0),
$button-border-color-hover: theme-color(main)
);
}
.SiteHeader-nav > ul > li {
&:focus a::after,
&:hover a::after {
background-color: get-color(neutral, 0);
}
> a {
color: get-color(neutral, 0);
}
}
.SiteHeader-nav ul li a:hover::after {
background: get-color(neutral, 0);
}
&:not(.is-scrolled):not(.is-expanded) .SiteHeader-container {
box-shadow: none;
}
+ .Page {
margin-top: 0;
}
.SiteHeader-logo-word {
fill: get-color(neutral, 0);
}
}
.SiteHeader.has-languagepicker:not(.is-scrolled) {
.SiteHeader-nav > ul > li > a {
padding: 3rem 0;
}
}
.SiteHeader._static {
position: absolute;
+ .Page > .hero:first-child,
+ .Page > .section:first-child {
padding-top: 6rem;
}
}
.SiteHeader._static {
@media screen and (max-width: $medium-width) {
+ .Page > main > .hero:first-child,
+ .Page > main > .section:first-child {
padding-top: Space(700);
}
}
}
.SiteHeader._transparent.is-scrolled,
.SiteHeader._filled.is-scrolled {
.SiteHeader-nav > ul > li {
> a {
padding: .25rem 0;
color: theme-color(main);
}
}
}
.SiteHeader._transparent.is-scrolled {
background: get-color(neutral, 0);
.button._link {
color: theme-color(main);
&:focus,
&:hover {
color: theme-color(main, dark);
text-decoration: none;
}
}
.SiteHeader-nav > ul > li {
&:focus > a::after,
&:hover > a::after {
background-color: theme-color(main);
}
> a {
padding: .25rem 0;
color: theme-color(main);
}
}
}
.SiteHeader.is-scrolled {
.SiteHeader-languagepicker {
display: none;
}
.SiteHeader-logo {
&-word {
opacity: 0;
transition: opacity $transition-time-300 $transition-out-default;
}
&-leaf {
display: block;
}
}
.SiteHeader-nav > ul > li > a {
padding: 1.5rem 0;
}
}
.SiteHeader.is-scrolled,
.SiteHeader.is-expanded,
.SiteHeader._transparent.is-scrolled {
.SiteHeader-cta .button._secondary {
@include button-color(
$button-text-color: get-color(neutral, 0),
$button-text-color-hover: get-color(neutral, 0),
$button-background-color: theme-color(main),
$button-border-color: theme-color(main),
$button-border-color-hover: $button-border-color
);
}
}
.Sidebar-menu-open .SiteHeader {
pointer-events: none; // This is so if the sidebar is open you can't click home link in the header
}
@media screen and (min-width: 380px) {
.SiteHeader {
&-login a {
display: inline-block;
}
}
}
@media screen and (min-width: $site-header-breakpoint) {
.SiteHeader {
&-nav ul {
margin-left: auto; // To right align sprout navigation
}
&-container {
padding: 0;
}
&-cta {
display: block;
}
&-login {
display: none;
}
&-menuicon {
display: none;
}
&-nav {
display: flex;
}
&-nav ul {
display: block;
}
}
.SiteHeader._small .SiteHeader-container {
padding: .75rem 0;
}
.SiteHeader._transparent.is-scrolled .SiteHeader-container,
.SiteHeader._filled.is-scrolled .SiteHeader-container {
padding: 0;
}
.SiteHeader.SiteHeader--noNavigation .SiteHeader-logo {
padding: Space(400) Space(200);
}
}
@media screen and (min-width: 1200px) {
.SiteHeader .SiteHeader-secondarynav .icon._arrow._after::after {
// We only want to show arrows if they can see the whole thing, otherwise the arrows cause weird layout bugs
display: inline-block;
}
}
// Brand Assets tooltip when right-clicking the logo
.batip {
@include tooltip(320px, below, 65px, -20px);
display: none;
padding-top: 30px;
padding-bottom: 30px;
.IconButton {
@include font-size-subhead;
position: absolute;
top: 0;
right: 10px;
}
}
// Adjustments to main content container based on SiteHeader size
.SiteHeader:not(._transparent) + * {
margin-top: 4rem;
}
.SiteHeader.has-languagepicker + * {
margin-top: 7rem;
}
.SiteHeader._flat {
& .SiteHeader-container,
&.is-scrolled .SiteHeader-container,
&.is-expanded .SiteHeader-container {
box-shadow: none;
}
}
There are no notes for this item.