Page Header

The responsive page header is the bar at the top of every DreamHost property.

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

Add .PageHeader__logo--internal to .PageHeader__logo for internal facing pages or when a user is logged into any Dreamhost system. Add .PageHeader--light to .PageHeader for a white background header & .PageHeader--transparent for a transparent background, so that the header may be overlayed on top of an image or gradient.

<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>
		<ul class="PageHeader__subnav">
			<li>
				<div class="Popover-container on-click">
					<a class="Button js-toggle-popover t-caret Button Button--compact Button--light">Login</a>
					<div class="Popover Popover--1 Popover--flush-right Popover--bottom">
						<div class="Popover__section">
							<ul class="List List--padding List--small-bold">
								<li class="l-block"><a href="#">Menu One</a></li>
								<li class="l-block"><a href="#">Menu Two</a></li>
							</ul>
						</div>
					</div>
				</div>
			</li>
			<li><div class="Menu-toggle js-menu-toggle"><span class="Menu-toggle__inner"></span></div></li>
		</ul>
	</div>
</div>