The header logo bar is a general branding component of the MSState theme. It appears on all pages as part of the general header except those with the full screen hero components.

Usage

• Use the .msu-header-maroon class on the <header> tag to set the color as maroon. Maroon is the default and most commonly used color.

<header id="msu-header" class="clearfix msu-header msu-header-maroon" aria-label="Primary header for Website Name">
	<div class="container-fluid clearfix">
		<div class="row">
			
			<div class="col-md align-self-center logo-container">
				<a id="logo" href="#" title="Home">
					<img src="https://cdn01.its.msstate.edu/i/logos/msstate/HORIZONTAL_WEB_white_maroon_m.svg" alt="Logo for Website Name" title="Website name" />
				</a>
			</div>

		</div>
	</div>
</header>

Usage

• Use the .msu-header-black class on the <header> tag to set the color as black.

<header id="msu-header" class="clearfix msu-header msu-header-black" aria-label="Primary header for Website Name">
	<div class="container-fluid clearfix">
		<div class="row">
			
			<div class="col-md align-self-center logo-container">
				<a id="logo" href="#" title="Home">
					<img src="https://cdn01.its.msstate.edu/i/logos/msstate/HORIZONTAL_WEB_white_maroon_m.svg" alt="Logo for Website Name" title="Website name" />
				</a>
			</div>

		</div>
	</div>
</header>

Usage

• Use the .msu-header-white class on the <header> tag to set the color as white.

<header id="msu-header" class="clearfix msu-header msu-header-white" aria-label="Primary header for Website Name">
	<div class="container-fluid clearfix">
		<div class="row">
			
			<div class="col-md align-self-center logo-container">
				<a id="logo" href="#" title="Home">
					<img src="https://cdn01.its.msstate.edu/i/logos/msstate/HORIZONTAL_WEB_maroon.svg" alt="Logo for Website Name" title="Website name" />
				</a>
			</div>

		</div>
	</div>
</header>