Site Header
Note that the Site Header contains the Site Navigation, Choose a Shake, and User Navigation components. See those components for variations and states.
Logged Out
<div class="page">
<div class="wrapper">
<header class="site-header">
<div class="site-branding">
<a href="#"
><img
class="site-branding--logo"
src="https://mltshp-cdn.com/static/images/logo-compact.svg"
alt="MLTSHP"
/></a>
</div>
<nav class="site-nav">
<button
type="button"
class="site-nav--toggle btn btn-warning btn-pastel btn-icon"
>
☰
</button>
<ul class="site-nav--list">
<li class="site-nav--item site-nav--popular">
<a class="btn btn-warning btn-pastel" href="#">Popular</a>
</li>
<li class="site-nav--item site-nav--signup">
<a class="btn btn-primary btn-shadow" href="#">Sign Up!</a>
</li>
</ul>
</nav>
<nav class="user-nav">
<ul class="user-nav--list">
<li class="user-nav--item">
<a href="#" class="user-nav--link">sign in</a>
</li>
</ul>
</nav>
</header>
</div>
</div>
Logged In
<div class="page">
<div class="wrapper">
<header class="site-header">
<div class="site-branding">
<a href="#"
><img
class="site-branding--logo"
src="https://mltshp-cdn.com/static/images/logo-compact.svg"
alt="MLTSHP"
/></a>
</div>
<nav class="site-nav">
<button
type="button"
class="site-nav--toggle btn btn-warning btn-pastel btn-icon"
>
☰
</button>
<ul class="site-nav--list">
<li class="site-nav--item site-nav--shake-list">
<div class="choose-a-shake">
<button
type="button"
class="choose-a-shake--toggle btn btn-success btn-pastel"
>
Shakes
<span class="caret"></span>
</button>
<div class="choose-a-shake--dropdown">
<ul class="top-shakes">
<li><a href="#">Friend Shake</a></li>
<li><a href="#">Your Shake</a></li>
<li><a href="#">Your Favorites</a></li>
<li><a href="#">Popular</a></li>
<li><a href="#">Incoming!!!</a></li>
</ul>
<ul class="group-shakes">
<li>
<a href="#"
>Shake for Long Names Like
Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch</a
>
</li>
<li><a href="#">Barbarella</a></li>
<li><a href="#">Dune</a></li>
</ul>
</div>
</div>
</li>
<li class="site-nav--item site-nav--conversations">
<a class="btn btn-success btn-pastel" href="#">Conversations</a>
</li>
<li class="site-nav--item site-nav--search">
<a class="btn btn-success btn-pastel" href="#">Search</a>
</li>
<li class="site-nav--item site-nav--upload">
<a class="btn btn-primary btn-shadow" href="">New Post</a>
</li>
</ul>
</nav>
<nav class="user-nav">
<ul class="user-nav--list">
<li class="user-nav--item">
<a href="#" class="user-nav--link">settings</a>
</li>
<li class="user-nav--item">
<a href="#" class="user-nav--link">faq</a>
</li>
<li class="user-nav--item">
<a href="#" class="user-nav--link">sign out</a>
</li>
</ul>
</nav>
</header>
</div>
</div>
Logged In with Content
Note: This example has been updated to include the "peekaboo" header behavior using placeholder JavaScript. You'll need to provide your own JS to make this work.
<script type="text/javascript">
// minimal implementation to demonstrate docking behavior of site header
window.addEventListener('DOMContentLoaded', () => {
const siteHeader = document.querySelector('.site-header');
let lastScrollY = window.scrollY;
const scrollHandler = () => {
if (!siteHeader.classList.contains('docked')) {
if (window.scrollY > 120) {
siteHeader.classList.add('docked');
}
} else {
if (window.scrollY <= 120) {
siteHeader.classList.remove('docked', 'visible', 'hidden');
}
}
if (siteHeader.classList.contains('docked')) {
const isVisible = siteHeader.classList.contains('visible');
if (!isVisible && window.scrollY < lastScrollY) {
// triggering delta can be 1px
siteHeader.classList.add('visible');
siteHeader.classList.remove('hidden');
} else if (isVisible && window.scrollY > lastScrollY + 20) {
// triggering delta must be ~20px
siteHeader.classList.remove('visible');
siteHeader.classList.add('hidden');
}
}
lastScrollY = window.scrollY;
};
window.addEventListener('scroll', scrollHandler);
});
</script>
<div class="page">
<div class="wrapper">
<header class="site-header">
<div class="site-branding">
<img
class="site-branding--logo"
src="https://mltshp-cdn.com/static/images/logo-compact.svg"
alt="MLTSHP"
/>
<div class="site-branding--icon" aria-label="MLTSHP"></div>
</div>
<nav class="site-nav">
<a
href="#notifications-anchor"
class="site-nav--notifications btn btn-danger btn-pastel"
>2</a
><button
type="button"
class="site-nav--toggle btn btn-warning btn-pastel btn-icon"
>
☰
</button>
<ul class="site-nav--list">
<li class="site-nav--item site-nav--shake-list">
<div class="choose-a-shake">
<button
type="button"
class="choose-a-shake--toggle btn btn-success btn-pastel"
>
Shakes
<span class="caret"></span>
</button>
<div class="choose-a-shake--dropdown">
<ul class="top-shakes">
<li><a href="#">Friend Shake</a></li>
<li><a href="#">Your Shake</a></li>
<li><a href="#">Your Favorites</a></li>
<li><a href="#">Popular</a></li>
<li><a href="#">Incoming!!!</a></li>
</ul>
<ul class="group-shakes">
<li>
<a href="#"
>Shake for Long Names Like
Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch</a
>
</li>
<li><a href="#">Barbarella</a></li>
<li><a href="#">Dune</a></li>
</ul>
</div>
</div>
</li>
<li class="site-nav--item site-nav--conversations">
<a class="btn btn-success btn-pastel" href="#">Conversations</a>
</li>
<li class="site-nav--item site-nav--search">
<a class="btn btn-success btn-pastel" href="#">Search</a>
</li>
<li class="site-nav--item site-nav--upload">
<a class="btn btn-primary btn-shadow" href="">New Post</a>
</li>
</ul>
</nav>
<nav class="user-nav">
<ul class="user-nav--list">
<li class="user-nav--item">
<a href="#" class="user-nav--link">settings</a>
</li>
<li class="user-nav--item">
<a href="#" class="user-nav--link">faq</a>
</li>
<li class="user-nav--item">
<a href="#" class="user-nav--link">sign out</a>
</li>
</ul>
</nav>
</header>
<div class="content content-with-sidebar content-shake">
<div class="sidebar">
<img
src="https://mltshp-cdn.com/s3/account/781/shake_dune.jpg"
width="284"
height="284"
/>
<div class="shake-details">
<h3 class="title">dune</h3>
<!-- prettier-ignore -->
<p class="description">the spice must flow. fear is the mind killer. the little death that brings about total obliteration.</p>
</div>
<div class="shake-sidebar-actions">
<div class="user-follow">
<a class="icon" href="#">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/781/shake_dune.jpg"
width="100"
height="100"
/>
</a>
<div class="follow">
<h4><a href="#">dune</a></h4>
<form>
<a
href="#"
class="submit-form btn btn-warning btn-pastel btn-small"
>- Unfollow</a
>
</form>
</div>
</div>
<div class="quit-shake">
<form>
<input
class="btn btn-danger btn-pastel btn-small"
type="submit"
value="Quit this shake?"
/>
</form>
</div>
</div>
<div class="shake-invite-member-block">
<div class="inner">
<h3>+ Invite A New Member</h3>
<form>
<div class="shake-input-wrapper">
<input type="text" class="input-text" name="name" />
<button
type="button"
class="invite-button btn btn-success btn-small"
disabled=""
>
Invite
</button>
<ul class="shake-results"></ul>
</div>
</form>
</div>
</div>
<a id="notifications-anchor"></a>
<div class="notification-block notification-block-invitation-request">
<div class="notification-block-hd on-shake-page">
2 requests to join a shake
</div>
<div class="notification-block-bd">
<div class="notification">
<a href="#">Chuck Lauer Vose</a>
has requested to join Dance Party.
<div class="notification-actions">
<form>
<input
type="submit"
class="btn btn-secondary btn-pastel btn-small"
value="Approve"
/>
</form>
<form>
<input
type="submit"
class="btn btn-warning btn-pastel btn-small"
value="Decline"
/>
</form>
</div>
</div>
<div class="notification">
<a href="#">Art Wells</a>
has requested to join Fantastic Internet Art.
<div class="notification-actions">
<form>
<input
type="submit"
class="btn btn-secondary btn-pastel btn-small"
value="Approve"
/>
</form>
<form>
<input
type="submit"
class="btn btn-warning btn-pastel btn-small"
value="Decline"
/>
</form>
</div>
</div>
</div>
</div>
<div class="shake-sidebar-editor-block">
<div class="editor-image">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/781/profile.jpg"
width="48"
height="48"
/>
</div>
<div class="editor-details">
<a href="#">patrickneville</a> is this shake’s editor.
</div>
<div class="clear"></div>
</div>
<div class="sidebar-search-block fun-form">
<form>
<div class="field">
<div class="field-input">
<input
type="search"
class="input-text"
name="q"
placeholder="Search this shake!"
autocorrect="off"
/>
</div>
</div>
</form>
<div class="clear"></div>
</div>
<div class="following-wrapper">
<h3>Members</h3>
<div class="following">
<ul>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/45/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/67/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/184/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/197/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/208/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/254/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/277/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/357/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/387/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/505/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/844/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/921/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/2413/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/2540/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/2541/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/3245/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/5108/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/5876/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/6420/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/7367/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/10533/profile.jpg"
/>
</a>
</li>
<li>
<a href="#">
<img
class="avatar--img"
border="0"
width="48"
height="48"
src="https://mltshp-cdn.com/s3/account/58837/profile.jpg"
/>
</a>
</li>
</ul>
</div>
</div>
<div class="following-wrapper">
<h3>Followed by <span class="count">(28)</span></h3>
<div class="following">
<ul>
<li>
<a href="#" title="patrick neville">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/781/profile.jpg"
width="48"
height="48"
/>
</a>
</li>
<li>
<a href="#" title="billy">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/78/profile.jpg"
width="48"
height="48"
/>
</a>
</li>
<li>
<a href="#" title="David Barry">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/5108/profile.jpg"
width="48"
height="48"
/>
</a>
</li>
<li>
<a href="#" title="Foist">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/208/profile.jpg"
width="48"
height="48"
/>
</a>
</li>
<li>
<a href="#" title="redfox">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/2540/profile.jpg"
width="48"
height="48"
/>
</a>
</li>
<li>
<a href="#" title="B.A. Rosenblum">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/357/profile.jpg"
width="48"
height="48"
/>
</a>
</li>
<li>
<a href="#" title="freqout">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/254/profile.jpg"
width="48"
height="48"
/>
</a>
</li>
<li>
<a href="#" title="tonyb">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/67/profile.jpg"
width="48"
height="48"
/>
</a>
</li>
<li>
<a href="#" title="finn">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/505/profile.jpg"
width="48"
height="48"
/>
</a>
</li>
<li>
<a href="#" title="idogcow">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/277/profile.jpg"
width="48"
height="48"
/>
</a>
</li>
</ul>
<br style="clear: both" />
<a class="view-all-following" href="#">view all</a>
</div>
</div>
</div>
<div class="body">
<div class="image-content-list">
<div class="image-title image-title-with-poster">
<div class="image-poster">
<a href="#" title="Lord_John_Whorfin">
<img
class="avatar--img"
src="https://mltshp-cdn.com/s3/account/58837/profile.jpg"
width="48"
height="48"
alt=""
/>
</a>
</div>
<h3>Fremen</h3>
<div class="clear"></div>
</div>
<div class="image-content">
<div class="the-image">
<a href="#"
><img src="https://mltshp-cdn.com/r/1JPTU" alt="Fremen"
/></a>
</div>
<div class="image-content-footer">
<div class="description">
<div class="the-description">Moebius concept art for Dune</div>
</div>
<div class="image-interactions">
<div class="like-this">
<form>
<button
type="button"
class="like-button btn btn-danger btn-small is-active"
>
<div class="btn--content">
<img
class="btn--icon"
src="https://mltshp-cdn.com/static/images/like-this.svg?v=b6b5d63ca476cb55e67c21965345e8db"
alt=""
/>
<span class="btn--text">Like</span>
</div>
</button>
<button
type="button"
class="unlike-button"
title="Unlike This"
aria-label="Unlike This"
>
<img
src="https://mltshp-cdn.com/static/images/liked-this.svg?v=e6f9810cfc8fa54a40073a3ddbaa90b5"
height="22"
width="25"
alt="Unlike This"
/>
</button>
</form>
</div>
<div class="save-this">
<form>
<button
type="button"
class="save-this-link save-this-link-multiple btn btn-warning btn-small"
>
<div class="btn--content">
<img
class="btn--icon"
src="https://mltshp-cdn.com/static/images/save-this.svg?v=5a6b71f0af47daac6eb1c038668c4b9b"
alt=""
/>
<span class="btn--text">Save</span>
<span class="btn--caret">▼</span>
</div>
</button>
</form>
</div>
</div>
<div class="originally-posted-by">
originally
<a class="the-post" href="#">posted</a> by
<a class="avatar--link" href="#">
<img
class="avatar--img"
valign="bottom"
width="20"
height="20"
src="https://mltshp-cdn.com/s3/account/58282/profile.jpg"
alt=""
/>
</a>
<a class="user-name" href="#">stereoplex</a>
</div>
<div class="inline-meta">
<span class="created-at">
<a href="#">
<time
datetime="2020-09-11 18:27:34"
title="Fri, 11 Sep 2020 18:27:34 "
>2 days ago</time
>
</a>
</span>
<ul class="stats">
<li class="views">5 Views</li>
<li class="saves">
<a href="#">0</a>
</li>
<li class="likes">
<a href="#">1</a>
</li>
<li class="comments"><a href="#">0</a></li>
</ul>
</div>
<div class="inline-details" style="display: none"></div>
<div class="clear"></div>
</div>
</div>
<div class="image-title image-title-with-poster">
<h3 class="image-edit-title">dune 1984 bts</h3>
<form
method="post"
class="image-edit-title-form"
action="/p/1JJ4N/quick-edit-title"
>
<input
type="text"
class="title-input"
name="title"
autocomplete="off"
value=""
/>
<div class="buttons">
<input
type="submit"
class="save btn btn-primary"
value="Save"
/>
<span class="or">or</span>
<a href="#" class="cancel btn btn-secondary">Cancel</a>
</div>
</form>
</div>
<div class="image-content">
<div class="the-image">
<a href="#"
><img src="https://mltshp-cdn.com/r/1JJ4N" alt="dune 1984 bts"
/></a>
</div>
<div class="image-content-footer">
<div class="description description-edit">
<div class="the-description">
source:
<a
href="#"
target="_blank"
rel="nofollow"
title="https://twitter.com/TheSpaceshipper/status/1294605495098122240/photo/1"
>https://twitter.com/TheSpace...</a
>
</div>
<form
method="post"
class="description-edit-form"
action="/p/1JJ4N/quick-edit-description"
>
<textarea
name="description"
class="description-edit-textarea"
></textarea>
<div class="buttons">
<input
type="submit"
class="save btn btn-primary btn-small"
value="Save"
/>
<span class="or">or</span>
<a href="#" class="cancel btn btn-secondary btn-small"
>Cancel</a
>
</div>
</form>
</div>
<div class="image-interactions"></div>
<div class="originally-posted-by">
originally
<a class="the-post" href="#">posted</a> by
<a class="avatar--link" href="#">
<img
class="avatar--img"
valign="bottom"
width="20"
height="20"
src="https://mltshp-cdn.com/s3/account/158/profile.jpg"
alt=""
/>
</a>
<a class="user-name" href="#">O_C</a>
</div>
<div class="inline-meta">
<span class="created-at">
<a href="#">
<time
datetime="2020-08-17 16:17:19"
title="Mon, 17 Aug 2020 16:17:19 "
>3 weeks ago</time
>
</a>
</span>
<ul class="stats">
<li class="views">3 Views</li>
<li class="saves">
<a href="#">0</a>
</li>
<li class="likes">
<a href="#">0</a>
</li>
<li class="comments"><a href="#">0</a></li>
</ul>
</div>
<div class="inline-details" style="display: none"></div>
<div class="clear"></div>
</div>
</div>
<div class="image-title image-title-with-poster">
<h3 class="image-edit-title">WAP</h3>
<form
method="post"
class="image-edit-title-form"
action="/p/1JJ4M/quick-edit-title"
>
<input
type="text"
class="title-input"
name="title"
autocomplete="off"
value=""
/>
<div class="buttons">
<input
type="submit"
class="save btn btn-primary"
value="Save"
/>
<span class="or">or</span>
<a href="#" class="cancel btn btn-secondary">Cancel</a>
</div>
</form>
</div>
<div class="image-content">
<div class="the-image">
<a href="#"
><img src="https://mltshp-cdn.com/r/1JJ4M" alt="WAP"
/></a>
</div>
<div class="image-content-footer">
<div class="description description-edit">
<div class="the-description the-description-blank">
click here to edit description
</div>
<form
method="post"
class="description-edit-form"
action="/p/1JJ4M/quick-edit-description"
>
<textarea
name="description"
class="description-edit-textarea"
></textarea>
<div class="buttons">
<input
type="submit"
class="save btn btn-primary btn-small"
value="Save"
/>
<span class="or">or</span>
<a href="#" class="cancel btn btn-secondary btn-small"
>Cancel</a
>
</div>
</form>
</div>
<div class="image-interactions"></div>
<div class="originally-posted-by">
originally
<a class="the-post" href="#">posted</a> by
<a class="avatar--link" href="#">
<img
class="avatar--img"
valign="bottom"
width="20"
height="20"
src="https://mltshp-cdn.com/s3/account/80/profile.jpg"
alt=""
/>
</a>
<a class="user-name" href="#">tonx</a>
</div>
<div class="inline-meta">
<span class="created-at">
<a href="#">
<time
datetime="2020-08-17 16:16:50"
title="Mon, 17 Aug 2020 16:16:50 "
>3 weeks ago</time
>
</a>
</span>
<ul class="stats">
<li class="views">16 Views</li>
<li class="saves">
<a href="#">0</a>
</li>
<li class="likes">
<a href="#">0</a>
</li>
<li class="comments"><a href="#">0</a></li>
</ul>
</div>
<div class="inline-details" style="display: none"></div>
<div class="clear"></div>
</div>
</div>
</div>
<div class="linear-navigation">
<div class="older">
<a class="btn btn-secondary btn-shadow" href="#">« Older</a>
</div>
<div class="newer"></div>
</div>
</div>
</div>
</div>
</div>