<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 &amp; 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"
}
  • Content:
    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;">&times;</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&nbsp;Assets</a>&nbsp;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);
        }
    });
    
  • URL: /components/raw/siteheader/SiteHeader.js
  • Filesystem Path: components/organisms/SiteHeader/SiteHeader.js
  • Size: 10.1 KB
  • Content:
    // 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;
        }
    }
    
  • URL: /components/raw/siteheader/SiteHeader.scss
  • Filesystem Path: components/organisms/SiteHeader/SiteHeader.scss
  • Size: 11 KB

There are no notes for this item.