Bear Blog announcement bar

A simple way to highlight something new or temporary on your blog.

Maybe a newsletter launch, pointing people to your guestbook, or letting readers know you're offline for a while.

Preview

Announcement bar with a link inside

How to use

Go to the dashboard "Nav" settings and add the markup below your navigation links. Then add the styles to your theme.

Markup

<div class="bar">

Here's how the announcement bar looks, with [a link](/a-link/) to highlight something.

</div>

Styles

.bar {
  margin-block: 1.5rem;
  padding-block: 1.2rem;
  padding-inline: 0.7rem;
  text-align: center;
  font-size: calc(var(--font-scale) * 0.85);
  color: var(--text-color);
  background: color-mix(in srgb, var(--text-color), var(--background-color) 94%);
  border: 1px solid color-mix(in srgb, var(--text-color), transparent 85%);
  border-radius: 4px;
}

.bar p {
  margin: 0;
    
}

.bar a {
  margin-inline-end: 0 !important;
}

Want more? Check out the full Bear Blog library.