Top Sticky Bar

Sticky bar at the top

by jshacker

HTML

<div class="top bar switcheroo init-dark">
  <div class="item clickable">Item A</div>
  <div class="item clickable">Item B</div>
  <div class="item clickable">Item C</div>
  <div class="item clickable">Item D</div>
  <div class="item clickable">Item E</div>
</div>
<hr />
<p class="switcheroo init-dark">
  I am a switcheroo init-dark.
  <span class="item">I am an item.</span>
</p>

CSS

.top {
  top: 0;
}

.bar {
  padding: 10px;
}

.bar .item {
  display: inline-block;
  padding: 10px;
}

.switcheroo.init-dark {
  background-color: #333;
  color: #fff;
}

.switcheroo.init-dark .item {
  background-color: #ccc;
  color: #000;
}

.switcheroo.init-dark .item:hover {
  background-color: #333;
  color: #fff;
  outline: thin solid #fff;
}

.clickable {
  cursor: pointer;
}