Versions Compared


  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migration of unmigrated content due to installation of a new plugin

You can insert infobars either at the top or bottom of pages on your website. They are commonly used to alert visitors about sales, product updates, and other current or upcoming events. Evergage Infobars are partially responsive by default; any content you add to an infobar takes on a definitive height, width, and position. However, if your site is responsive, you can use custom CSS to make the entire infobar behave responsively.

titleThis Article Explains

This article details the process for making your infobar responsive and shows an example of one approach.

titleSections in this Article

Table of Contents

You should have a basic working knowledge of CSS and an understanding of responsive behavior.

Create an Infobar Message

  1. Create or edit a campaign
  2. Add an infobar message to the campaign
  3. Select the location on the page
  4. Open the Message Source Code
  5. Add a parent container to the infobar
  6. Give the container a class such as eg-container
  7. If your message has a close icon, it can remain outside of the container DIV
  8. Click APPLY

Adjust Sizing and Styling

Assign styles to the container DIV

These settings ensure that as the visitor resizes the window, any content within the parent div will adjust to fit the entire width of the infobar.

  1. With Message Source Code still open, add styles to the container DIV

    1. Width: 100% 

    2. Text-align style: center

  2. Click APPLY

In Top Level Styles, set the height to auto

This setting ensures the infobar will resize based on the height of the content within it instead of retaining its initial fixed height.

At the right of the Message Source Code editor, enter height: auto;

Remove Absolute Positioning Styles

In the style tag in the DIV that contains the message text, remove the absolute positioning styles automatically generated by Evergage and click APPLY:

  1. position
  2. top
  3. left

Now, the source code for your message should look similar to the image at the right





Style the Infobar Message


Adjust the message styling and click APPLY. In this example, the message styling was adjusted as follows:

  1. Message text has been changed to Memorial Day Sale! All Shoes 30% Off!
  2. Font has been changed to 26px, uppercase, bold
  3. Background has been changed to match the color palette of the site



View Your Message

  1. Once your message looks the way you want it to, test your campaign

  2. As you adjust the size of the screen, the message will adjust to accommodate the size of the content within the confines of the screen size


titleFull size infobar message




titleInfobar is responsive to smaller screen size



Add Additional Content to the Message

If needed, you can add a CTA to your infobar and it will also behave responsively.

Create a Second Container

  1. Add a second container DIV within the container DIV you created in step 5 of the first section

  2. Give the container a class such as eg-cta

  3. Click APPLY

  1. Add a link within this new div that links to another page on your site
  2. Adjust styling
  3. Click APPLY

titleFull size infobar message with CTA link

titleInfobar with CTA is responsive to smaller screen size