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>