diff --git a/_assets/css/_styles.scss b/_assets/css/_styles.scss
index 76366a4..71193cb 100644
--- a/_assets/css/_styles.scss
+++ b/_assets/css/_styles.scss
@@ -337,6 +337,37 @@ nav.TK-Nav, .PRGS-PairNav {
     margin-top: -95px;
 }
 
+// Ribbon Announcement
+
+.SiteRibbon-text,
+.SiteRibbon-CTA {
+    display: inline;
+    vertical-align: middle;
+}
+
+.SiteRibbon {
+    margin-top: -95px;
+    top: 0;
+    position: relative;
+    padding: 20px 0 18px 0;
+    font-family: FaktSlabPro,Arial,Helvetica,sans-serif;
+    font-weight: 300;
+    font-size: 16px;
+    line-height: 1.2;
+    text-align: center;
+    z-index: 50000;
+    color: #000;
+    background-color: #ffda3f;
+
+    .container {
+        position: relative;
+    }
+
+    + nav.TK-Nav, + .PRGS-PairNav {
+        margin-top: 0;
+    }
+}
+
 /* Main Menu */
 
 $text-color: #4a4e52;
@@ -2708,6 +2739,10 @@ $callout-bg: #d7dfe3;
 
 // md size
 @media (min-width: 992px) {
+    .SiteRibbon {
+        font-size: 20px;
+    }
+
     .live-samples .callout-tabs {
         &::after {
             display: none;
@@ -3197,6 +3232,14 @@ span.all-components-expanded-icon {
         transform: translateZ(0);
         -webkit-transform: translateZ(0);
     }
+
+    .SiteRibbon {
+        position: sticky;
+
+        + nav.TK-Nav, + .PRGS-PairNav {
+            top: 24px;
+        }
+    }
 }
 
 @media (min-width: 768px) { /* Styles for width >= 768px */
@@ -4631,23 +4674,24 @@ div#sidetoc {
     }
 }
 
-div{
-  &.k-content {
-    &.k-state-active{
-      .copy-code-btn {
-        padding:7px 10px;
-      }      
+div {
+    &.k-content {
+        &.k-state-active {
+            .copy-code-btn {
+                padding: 7px 10px;
+            }
+        }
     }
-  }
 }
+
 .copy-code-btn {
     position: absolute;
     top: 0;
     right: 0;
-    padding:10px;
+    padding: 10px;
     z-index: 100;
 
     &:hover {
-      cursor: pointer;
+        cursor: pointer;
     }
 }
diff --git a/_assets/js/ribbon.js b/_assets/js/ribbon.js
deleted file mode 100644
index b6b869b..0000000
--- a/_assets/js/ribbon.js
+++ /dev/null
@@ -1,32 +0,0 @@
-var ribbon = $('.SiteRibbon');
-var x = $(".SiteRibbon-x");
-var createCookie = function(name, value, days) {
-    var expires = "";
-    if (days) {
-        var date = new Date();
-        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
-        expires = "; expires=" + date.toGMTString();
-    }
-    else { expires = ""; }
-    document.cookie = name + "=" + value + expires + "; path=/";
-};
-var readCookie = function(name) {
-    var nameEQ = name + "=";
-    var ca = document.cookie.split(';');
-    for (var i = 0; i < ca.length; i++) {
-        var c = ca[i];
-        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
-        if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
-    }
-    return null;
-};
-var cookieName = 'ribbonClosed-' + btoa(encodeURI($('.SiteRibbon-text').text().replace(/\s+/g, ""))).replace(/\=|\//g, "").slice(0, 30);
-var hasCookie = readCookie(cookieName);
-
-if (!hasCookie) {
-    ribbon.removeClass('is-hidden');
-    x.on("click", function() {
-        ribbon.slideUp();
-        createCookie(cookieName, true, 1);
-    });
-}
\ No newline at end of file
diff --git a/_assets/js/side-nav.js b/_assets/js/side-nav.js
index edc6d7c..458d519 100644
--- a/_assets/js/side-nav.js
+++ b/_assets/js/side-nav.js
@@ -87,7 +87,7 @@ function setSideNavPosition() {
     var $window = $(window);
     var windowHeight = $window.height();
     var scrollFold = $window.scrollTop() + windowHeight;
-    var topNavigationHeight = $('nav.TK-Nav').height() || ($('.PRGS-Nav').height() + $('.PRGS-Bar').height());
+    var topNavigationHeight = $('.SiteRibbon').outerHeight() + ($('nav.TK-Nav').height() || ($('.PRGS-Nav').height() + $('.PRGS-Bar').height()));
     var progressBarHeight = $('aside.TK-Hat').height() || $('.PRGS-Bar').height();
 
     var top = window.scrollY > 0 ? topNavigationHeight - progressBarHeight : topNavigationHeight;
diff --git a/_includes/announcement.html b/_includes/announcement.html
index ae0d4f1..3e55d34 100644
--- a/_includes/announcement.html
+++ b/_includes/announcement.html
@@ -1,79 +1,9 @@
-<style>
-  .SiteRibbon {
-    position: relative;
-    padding: 20px 0 18px 0;
-    font-family: FaktSlabPro,Arial,Helvetica,sans-serif;
-    font-weight: 300;
-    font-size: 16px;
-    line-height: 1.2;
-    text-align: center;
-    color: #000;
-    background-color: #ffda3f;
-  }
-
-  .SiteRibbon.is-hidden {
-    display: none;
-  }
-
-  .SiteRibbon .container {
-    position: relative;
-  }
-  .SiteRibbon-text,
-  .SiteRibbon-CTA {
-    display: inline-block;
-    vertical-align: middle;
-  }
-
-  .SiteRibbon-CTA a {
-    cursor: pointer;
-  }
-
-  .SiteRibbon-x {
-    position: absolute;
-    top: 50%;
-    right: 15px;
-    width: 44px;
-    padding: 0;
-    border: 0;
-    font-family: FaktSlabPro,Arial,Helvetica,sans-serif;
-    font-weight: 300;
-    font-size: 30px;
-    line-height: 1.2;
-    background: none;
-    cursor: pointer;
-    outline: 0;
-    opacity: 1;
-    margin-top: -.5em;
-  }
-
-  .SiteRibbon-x:hover {
-    opacity: .7;
-  }
-
-  @media (min-width: 992px) {
-    font-size: 20px;
-  }
-</style>
-
-<div class="SiteRibbon is-hidden" id="announcement">
-  <div class="container">
-    <div class="u-pr5">
-      <span class="SiteRibbon-text u-fs20">
-        Say ‘no’ to Ugly Apps. Modern UI with new React, Angular and Vue components.
-        <a href="https://www.telerik.com/support/whats-new/kendo-ui?utm_medium=telerik&utm_source=yellow-ribbon&utm_campaign=kendo-ui-awareness-r118release"><strong>See our New Release!</strong></a>
-      </span>
-    </div>
-    <button type="button" class="SiteRibbon-x">×</button>
-  </div>
-</div>
-
-{% javascript "ribbon" %}
-
+<div class="SiteRibbon js-r1dt" style="display:none;"><div class="container">
+<span class="SiteRibbon-text">
+  {{page.announcement}}
+</span></div></div>
 <script>
-    $(".SiteRibbon-x")
-        .click(function() {
-            $(document.documentElement).addClass("no-announcement");
-            $(this).closest(".SiteRibbon").slideUp();
-        });
-    $(document.documentElement).toggleClass("no-announcement", $(".SiteRibbon").hasClass("is-hidden"));
+  $(document).ready(function(){
+    $('.js-r1dt').insertBefore($('#js-tlrk-nav')).end().show();
+  });
 </script>
diff --git a/_layouts/default.html b/_layouts/default.html
index c0178b4..afbcbd8 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -96,7 +96,7 @@
       apiColumnsCount = {{ site.api_columns_count }};
       {% endif %}
     </script>
-
+{% if page.announcement %}{% include announcement.html %}{% endif %}
 {% include nav.html %}
 
 <div id="content">