


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.
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>