Issues

  • All variants of the masthead pattern currently don’t show accurate tablet and phone renderings in the preview panel due to how mobile styles are compiled into the global stylesheet. The following is a workaround:
    1. Click “With layout” under the Preview section of the Info panel. This will load the pattern into it’s own tab/page.
    2. Inspect with your browser developer tools.
    3. Toggle on responsive design/device preview within the developer tools.
    4. Select an appropriate device from the dropdown to test the applicable styles (i.e. an iPhone model for phones, an iPad model for tablets).
    5. Refresh the browser. This should trigger the Javascript to load and render the appropriate stylesheets.
<header id="Masthead" role="banner">
    <div id="MastheadInner">
        <div class="Logo">
            <div>
                <h1>
                    <a href="">
                                <img src="../../images/sgf-logo.svg" alt="Missouri State University"  height="153"   width="218"  />
                            </a>
                </h1>
            </div>
        </div>
        <div class="utility">
            <div class="skip-nav">
                <a href="#PageInnerWrapper" class="item hidden">Skip to content</a>
                <a href="#MainNav" class="item hidden">Skip to navigation</a>
            </div>
            <nav aria-label="Top menu">
                <div id="MastheadControls">
                    <div class="SiteIndex">
                        <button class="IndexControl">A-Z</button>
                    </div>
                    <div class="Search">
                        <form itemscope itemprop="potentialAction" itemtype="https://schema.org/SearchAction" action="https://search.missouristate.edu/" method="get">
                            <meta itemprop="target" content="https://search.missouristate.edu/?q={q}" />
                            <label for="Keywords">
                                        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Enter keyword:" width="1" height="1" />Search
                                    </label>
                            <input itemprop="query-input" type="search" name="q" id="Keywords" placeholder="Search" />
                            <input type="image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="1" alt="Go" />
                        </form>
                    </div>
                </div>
            </nav>
        </div>
    </div>
</header>
<nav id="SearchContainer" aria-label="Site index menu">
    <div class="SiteIndex">
        <a href="https://search.missouristate.edu/siteindex/a">a</a>
        <a href="https://search.missouristate.edu/siteindex/b">b</a>
        <a href="https://search.missouristate.edu/siteindex/c">c</a>
        <a href="https://search.missouristate.edu/siteindex/d">d</a>
        <a href="https://search.missouristate.edu/siteindex/e">e</a>
        <a href="https://search.missouristate.edu/siteindex/f">f</a>
        <a href="https://search.missouristate.edu/siteindex/g">g</a>
        <a href="https://search.missouristate.edu/siteindex/h">h</a>
        <a href="https://search.missouristate.edu/siteindex/i">i</a>
        <a href="https://search.missouristate.edu/siteindex/j">j</a>
        <a href="https://search.missouristate.edu/siteindex/k">k</a>
        <a href="https://search.missouristate.edu/siteindex/l">l</a>
        <a href="https://search.missouristate.edu/siteindex/m">m</a>
        <a href="https://search.missouristate.edu/siteindex/n">n</a>
        <a href="https://search.missouristate.edu/siteindex/o">o</a>
        <a href="https://search.missouristate.edu/siteindex/p">p</a>
        <a href="https://search.missouristate.edu/siteindex/q">q</a>
        <a href="https://search.missouristate.edu/siteindex/r">r</a>
        <a href="https://search.missouristate.edu/siteindex/s">s</a>
        <a href="https://search.missouristate.edu/siteindex/t">t</a>
        <a href="https://search.missouristate.edu/siteindex/u">u</a>
        <a href="https://search.missouristate.edu/siteindex/v">v</a>
        <a href="https://search.missouristate.edu/siteindex/w">w</a>
        <a href="https://search.missouristate.edu/siteindex/x">x</a>
        <a href="https://search.missouristate.edu/siteindex/y">y</a>
        <a href="https://search.missouristate.edu/siteindex/z">z</a>
    </div>
</nav>
<header id="Masthead" role="banner">
    <div id="MastheadInner">
        <div class="Logo">
            <div>
                {{#if hasUnitMasthead}}
                    <a href="{{campusUrlAnchor}}">
                        <img src="{{path imageSrc}}" alt="{{imageAlt}}" height="{{imageHeight}}" width="{{imageWidth}}" />
                    </a>
                {{else}}
                    {{#if homepage}}
                        <a href="{{campusUrlAnchor}}">
                            <img src="{{path imageSrc}}" alt="{{imageAlt}}" {{#if imageHeight}} height="{{imageHeight}}" {{/if}} {{#if imageWidth}} width="{{imageWidth}}" {{/if}} />
                        </a>
                    {{else}}
                        <h1>
                            <a href="{{campusUrlAnchor}}">
                                <img src="{{path imageSrc}}" alt="{{imageAlt}}" {{#if imageHeight}} height="{{imageHeight}}" {{/if}} {{#if imageWidth}} width="{{imageWidth}}" {{/if}} />
                            </a>
                        </h1>
                    {{/if}}
                {{/if}}
            </div>
        </div>
        <div class="utility">
            <div class="skip-nav">
                <a href="#PageInnerWrapper" class="item hidden">Skip to content</a>
                <a href="#MainNav" class="item hidden">Skip to navigation</a>
            </div>
            {{#if utilityBlockDisplay}}
                <nav aria-label="Top menu">
                    <div id="MastheadControls">
                        {{#if logInDisplay}}
                            <div class="BearPass">
                                <button>Log in</button>
                            </div>
                        {{/if}}
                        {{#if siteIndexDisplay}}
                            <div class="SiteIndex">
                                <button class="IndexControl">A-Z</button>
                            </div>
                        {{/if}}
                        {{#if searchDisplay}}
                            <div class="Search">
                                <form itemscope itemprop="potentialAction" itemtype="https://schema.org/SearchAction" action="{{searchUrl}}" method="get">
                                    <meta itemprop="target" content="https://search.missouristate.edu/?q={q}" />
                                    <label for="Keywords">
                                        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="Enter keyword:" width="1" height="1" />Search
                                    </label>
                                    {{#if searchFilter}}
                                        <input name="urlfilter" value="{{searchFilter}}" type="hidden" />
                                    {{/if}}
                                    <input itemprop="query-input" type="search" name="q" id="Keywords" placeholder="Search" />
                                    <input type="image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" width="1" height="1" alt="Go" />
                                </form>
                            </div>
                        {{/if}}
                    </div>
                </nav>
            {{/if}}
        </div>
    </div>
</header>
<nav id="SearchContainer" aria-label="Site index menu">
    {{#if logInDisplay}}
        <div class="BearPassLogin"></div>
    {{/if}}
    {{#if siteIndexDisplay}}
        <div class="SiteIndex">
            <a href="{{searchUrl}}siteindex/a">a</a>
            <a href="{{searchUrl}}siteindex/b">b</a>
            <a href="{{searchUrl}}siteindex/c">c</a>
            <a href="{{searchUrl}}siteindex/d">d</a>
            <a href="{{searchUrl}}siteindex/e">e</a>
            <a href="{{searchUrl}}siteindex/f">f</a>
            <a href="{{searchUrl}}siteindex/g">g</a>
            <a href="{{searchUrl}}siteindex/h">h</a>
            <a href="{{searchUrl}}siteindex/i">i</a>
            <a href="{{searchUrl}}siteindex/j">j</a>
            <a href="{{searchUrl}}siteindex/k">k</a>
            <a href="{{searchUrl}}siteindex/l">l</a>
            <a href="{{searchUrl}}siteindex/m">m</a>
            <a href="{{searchUrl}}siteindex/n">n</a>
            <a href="{{searchUrl}}siteindex/o">o</a>
            <a href="{{searchUrl}}siteindex/p">p</a>
            <a href="{{searchUrl}}siteindex/q">q</a>
            <a href="{{searchUrl}}siteindex/r">r</a>
            <a href="{{searchUrl}}siteindex/s">s</a>
            <a href="{{searchUrl}}siteindex/t">t</a>
            <a href="{{searchUrl}}siteindex/u">u</a>
            <a href="{{searchUrl}}siteindex/v">v</a>
            <a href="{{searchUrl}}siteindex/w">w</a>
            <a href="{{searchUrl}}siteindex/x">x</a>
            <a href="{{searchUrl}}siteindex/y">y</a>
            <a href="{{searchUrl}}siteindex/z">z</a>
        </div>
    {{/if}}
</nav>
{
  "imageSrc": "/images/sgf-logo.svg",
  "imageAlt": "Missouri State University",
  "imageHeight": 153,
  "imageWidth": 218,
  "utilityBlockDisplay": true,
  "logInDisplay": null,
  "siteIndexDisplay": true,
  "searchDisplay": true,
  "searchUrl": "https://search.missouristate.edu/",
  "searchFilter": null
}