Integrate the Quick Announcement Bar to Parallax Theme with placeholder option 

1. Select the placeholder option (the last option) under the "position" settings in the App and check "Pin the bar to the position". Then save the bar config. 

2. In the theme.liquid file find <body class="{{ template | replace: '.', '-' | handle }} {% if feature_image %}feature_image{% endif %}">

3. Copy and paste the following lines under it

<div id="qab_placeholder">
      var qab_adjusted = false;
      $( "#qab_placeholder" ).on( "qab_fully_loaded", function(event, p1) {
        if ((p1=='inserted' || p1=='inserted_sticky') && !qab_adjusted ){
          qab_adjusted = true;
          var qab_height = $("#qab_background").height();
          var menu_top = parseInt($(".mm-fixed-top").css("top"));
          $( ".mm-fixed-top" ).css("top", qab_height + menu_top + "px");
          $("#nav").css("z-index", 1000000);

4. Click Save

5. Open the styles.scss.liquid file, find div.header_bar around line 275 of the file, and remove !important in the line after top: 0, but keep the semicolon.

Before the change:

After the change:

7.Click Save

NOTE: This tutorial is for putting the bar at the top of the page. You can always put the bar at the bottom of the page with out any of the integration.