Page Header

The page header is the bar at the top of every DreamHost application that contains the logo and navigation

Watch out! The responsive part of the page header doesn't seem to work right now. Maybe it's your destiny to be the one to solve it. Track issue.

Basic guidelines

  • .PageHeader__nav should contain the primary navigation
  • .PageHeader__subnav` is for all the secondary links we may need to provide
  • Both nav and subnav supports lists within a `.Popover` as a dropdown
<div class="PageHeader">
	<div class="PageHeader__container">
		<a class="PageHeader__logo" href="//www.dreamhost.com"></a>
		<ul class="PageHeader__nav">
			<li><a class="PageHeader__nav-link is-active" href="#">Active link</a></li>
			<li><a class="PageHeader__nav-link" href="#">Other</a></li>
			<li class="Popover-container on-click">
				<button class="PageHeader__nav-link t-caret js-toggle-popover Button--unset">Dropdown</button>
				<div class="Popover Popover--1 Popover--bottom">
					<div class="Popover__section">
						<ul class="List List--padding List--small-bold">
							<li><a href="#">Menu One</a></li>
							<li><a href="#">Menu Two</a></li>
						</ul>
					</div>
				</div>
			</li>
		</ul>
	</div>
</div>