MSU Masthead

The Michigan State University Masthead comprises the Spartan helmet graphic and the text “Michigan State University” using the Gotham typeface.

The MSU Masthead is designed to enable the Spartan helmet graphic and MSU text to display over the top of any web page background or image.

• Required on every institutional web page
• Variation without the Spartan helmet available
• Placement instructions detailed in Layout (HTML) and Style (CSS)
• CSS for responsive and legacy (non-responsive) websites is available in Layout (HTML) and Style (CSS) - Section 2.3. To use this CSS code, copy and paste it at the end of your website's main CSS file.
• Exemption: Intercollegiate Athletics

IMPORTANT: Sample code is provided as a guideline in implementing the technical requirements indicated in the MSU Web Standards for the MSU Masthead, Search Tool, and Standard Footer. Website owners may have to modify the sample code in order to achieve the desired results and correct responsive behavior

HTML sample code does not include styles that enable responsive behavior (as each website will vary) but can be used for legacy (non-responsive) websites with little or no changes.

Where "q" is used in your CSS to reference input box name, be sure to change any reference of input#q to input[name="q"].

<!-- CSS class that hides the Search button text -->
.hide {
  position: absolute;
  left: -9999px; }


<!-- MSU Masthead and Search Tool ================================================== -->
<div class="MSUwrapper" id="MSUheader">
    <div id="MSUmasthead" role="banner">
        <a href="http://www.msu.edu">
            <!-- if using a dark background change the img src to images/masthead-helmet-white.png-->
            <img class="screen-msugraphic" alt="Michigan State University masthead graphic" src="images/masthead-helmet-green.png"/>
            <!-- MSU Web Standards indicate the MSU masthead graphic should be printed black -->
            <img class="print-msugraphic" alt="Michigan State University masthead graphic" src="images/masthead-helmet-black.png"/>
        </a>
    </div>
    <!-- If you prefer to have a transparent fill in the search box, replace the class 'white-fill' with 'no-fill' -->
    <div id="MSUSearchTool" class="white-fill" role="search">
        <div id="search-tool-box" >
            <form action="//u.search.msu.edu/index.php" method="get">
                <input name="client" type="hidden" value="My Site Name" />
                <input name="sitesearch" type="hidden" value="mysite.msu.edu" />
                <input name="analytics" type="hidden" value="UA-12345678-9" /> 
    		<label><span class="hide">Search Tool</span> 
                    <input name="q" placeholder="Search..."/><br />
                </label>
                <button id="btn_search" type="submit"><span class="hide">Search</span></button>
            </form>
        </div> 
    </div>
</div>

3.1 Use

• Use approved, unaltered versions only. (See Resources and Downloads)
• Always link to http://msu.edu.
• Do not place more than one on a web page.
• Do not combine with any other marks, graphic elements, or words.

3.2 Unacceptable Masthead Variations

• Do not reconfigure or resize the MSU Helmet image.
• Do not alter font weight or bolded text on individual words in the MSU text.
• Do not split the MSU text onto multiple lines.
• Do not underline the MSU text.
• Do not place the MSU Masthead on a background (other than over the top of web page).
• Do not add "drop shadow" effects on the MSU text.

3.3 Approved MSU Masthead Variations

3.3.1 Masthead For Light-Colored Backgrounds or Images

• Masthead graphic and text color is MSU green (#18453B)
• When printed, masthead graphic and text color is black (#000000)

3.3.2 Masthead For Dark-Colored Backgrounds or Images

• Masthead graphic and text color is white (#FFFFFF)
• When printed, masthead graphic and text color is black (#000000)