Evergage Knowledge Base
Space shortcuts

(888) 310-0589 x2

Page tree
Skip to end of metadata
Go to start of metadata

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.

This Article Explains

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

Sections in this Article

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

 

Full size infobar message

 

 

 

Infobar 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

Full size infobar message with CTA link

Infobar with CTA is responsive to smaller screen size