Robert Birming

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.1

Here's how the announcement bar looks, with a link to highlight something.

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

/* Announcement bar | robertbirming.com */
.bar {
  margin-block: var(--space-block);
  padding-block: 1.2rem;
  padding-inline: 0.7rem;
  text-align: center;
  font-size: var(--font-small);
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.bar p {
  margin: 0;
}

Want more? Check out the add-ons. Happy blogging, say something worth saying.

  1. This add-on is built for the Bearming theme. Using a different theme? Add the Bearming tokens to make it work with your setup.↩