• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

Ani's Webdev Blog

A learning diary of website development

  • Home
  • Demo
    • Ajax Contact Form
  • WordPress
  • Front-end
  • Backend

[HTML, CSS] Make a sticky announcement bar with Bootstrap

Modified on: July 4, 2020

Task requirements

  • A Bootstrap-style announcement/information bar that is fixed to the top, including one text string and one button
  • Makes the button in the bar to become a link in mobile view

Table of contents

  1. 1. Create an announcement bar with Bootstrap alert class (HTML, CSS)
    1. 2. Make the announcement bar to stick to the head of the web page
      1. Method one: using Bootstrap’s “fixed-top” class
        1. Method two: using “position: sticky”
        2. 3. Center the Bootstrap dismiss close button vertically
          1. 4. Make the button to become a link in mobile view
            1. Result

              1. Create an announcement bar with Bootstrap alert class (HTML, CSS)

              We can have an announcement bar in a few lines of code using Bootstrap’s dismissible alert class:

              HTML

              2. Make the announcement bar to stick to the head of the web page

              Method one: using Bootstrap’s “fixed-top” class

              To make this sticky position, you can use “fixed-top” class by Bootstrap. However, the alert element will overlap with the content below. To prevent it to overlap with the next element, you can provide a margin.

              First, add “fixed-top” class to the alert element:

              HTML

              Then, provide a margin:

              CSS

              I think this is not a good way because the margin is not a dynamic value. If the alert element is higher than the value provided, it will overlap again. But it is a fast method because it make advantages of Bootstrap and would fit nicely if you always know the height of the announcement bar.

              Method two: using “position: sticky”

              Another way to stick the bar to the head of the page is to use the “position: sticky” and then set the position of the bar in relation with the whole document so that when visitor scroll down the page, the bar will follow.

              So let’s add our custom CSS class:

              HTML
              CSS

              3. Center the Bootstrap dismiss close button vertically

              This is quite a small detail. As you might notice, the close (x) element of the alert class is not vertically centered. It only has a padding. This is perfect if you have only 1 line of information to show on the bar. But what if your bar has more text and the height increases? Then the close button is not centered anymore.

              To make this vertically center no matter how high the bar is, simply use “transform: translate“.

              CSS

              4. Make the button to become a link in mobile view

              This is another small thing that does not need to be done on every project. But I prefer the info bar to look a bit cleaner on mobile devices and so I would like to replace the button with a simple link.

              So the way to do it: have in the html both link and button. By default hide the link and display the button. Hide the button and display the link in the mobile view.

              I think this is a quite ugly method but it works and does not take much time to implement. With Bootstrap it is very easy to do using .d-none and .d-block.

              HTML
              CSS

              Result

              JSFiddle: https://jsfiddle.net/anhkarppinen/ht824f7k/7/

              Filed Under: Front-end Tagged With: bootstrap, css, html

              Recent posts

              [WordPress] Let’s Make Plugin E01: A Simple View Count Plugin

              [WordPress] Create custom post type programmatically

              [WordPress] Open Images in Posts into Lightboxes On Clicks (Without Plugins)

              Reader Interactions

              You are here: Home / Front-end / [HTML, CSS] Make a sticky announcement bar with Bootstrap

              Leave a Reply Cancel reply

              Your email address will not be published. Required fields are marked *

              Primary Sidebar

              Hi! I am a Vietnamese coder living in Oulu, Finland. Currently I am working with PHP, MySQL, HTML, CSS, and JavaScript. This blog is my learning diary, in which I share knowledge from my own experience or research. Hopefully you can find something useful here and don’t hesitate to open a discussion or leave a feedback!

              FOLLOW MY BLOG

              Thank you for visiting this website! I hope you find something useful here :). Contact me by email: anh@anhkarppinen.com.