diff --git a/config/jsdoc/api/template/static/scripts/main.js b/config/jsdoc/api/template/static/scripts/main.js
index 235266ba20..16dc04f9fe 100644
--- a/config/jsdoc/api/template/static/scripts/main.js
+++ b/config/jsdoc/api/template/static/scripts/main.js
@@ -53,30 +53,39 @@ $(function () {
     $(window).on('resize', _onResize);
     _onResize();
 
+    var currentVersion = document.getElementById('package-version').innerHTML;
+
     // warn about outdated version
-    var srcLinks = $('div.tag-source');
-    var location = window.location.href;
-    var branchSearch = location.match(/\/([^\/]*)\/apidoc\//);
-    if (branchSearch && branchSearch.length) {
-      var branch = branchSearch[1];
-      if (branch !== 'latest') {
-        if (/^v[0-9\.]*$/.test(branch)) {
-          var ok = confirm('You are viewing outdated docs. Do you want to try the latest?');
-          if (ok) {
-            window.location.href = location.replace(branchSearch[0], '/latest/apidoc/');
-          }
-        } else {
-          $('.package-version').text(branch);
+    var packageUrl = 'https://raw.githubusercontent.com/openlayers/openlayers.github.io/build/package.json';
+    fetch(packageUrl).then(function(response) {
+      return response.json();
+    }).then(function(json) {
+      var latestVersion = json.version;
+      document.getElementById('latest-version').innerHTML = latestVersion;
+      var url = window.location.href;
+      var branchSearch = url.match(/\/([^\/]*)\/apidoc\//);
+      var cookieText = 'dismissed=-' + latestVersion + '-';
+      var dismissed = document.cookie.indexOf(cookieText) != -1;
+      if (!dismissed && /^v[0-9\.]*$/.test(branchSearch[1]) && currentVersion != latestVersion) {
+        var link = url.replace(branchSearch[0], '/latest/apidoc/');
+        fetch(link, {method: 'head'}).then(function(response) {
+          var a = document.getElementById('latest-link');
+          a.href = response.status == 200 ? link : '../../latest/apidoc/';
+        });
+        var latestCheck = document.getElementById('latest-check');
+        latestCheck.style.display = '';
+        document.getElementById('latest-dismiss').onclick = function() {
+          latestCheck.style.display = 'none';
+          document.cookie = cookieText;
         }
       }
-    }
+    });
 
     // create source code links to github
-    var version = $('.package-version');
-    var branch = version.text();
+    var srcLinks = $('div.tag-source');
     srcLinks.each(function(i, el) {
       var textParts = el.innerHTML.trim().split(', ');
-      var link = 'https://github.com/openlayers/ol3/blob/' + branch + '/' +
+      var link = 'https://github.com/openlayers/ol3/blob/' + currentVersion + '/' +
           textParts[0];
       el.innerHTML = '<a href="' + link + '">' + textParts[0] + '</a>, ' +
           '<a href="' + link + textParts[1].replace('line ', '#l') + '">' +
diff --git a/config/jsdoc/api/template/static/styles/jaguar.css b/config/jsdoc/api/template/static/styles/jaguar.css
index fa2e7df197..073d9c46d2 100644
--- a/config/jsdoc/api/template/static/styles/jaguar.css
+++ b/config/jsdoc/api/template/static/styles/jaguar.css
@@ -132,7 +132,6 @@ li {
   display: block;
   font-size: 0.85em;
 }
-.navigation h4,
 .navigation li.item .title a {
   color: #e1e1e1;
 }
@@ -417,3 +416,7 @@ footer {
   left: 250px;
   font-weight: normal;
 }
+#latest-check {
+  margin-top: -10px;
+  margin-bottom: 10px;
+}
diff --git a/config/jsdoc/api/template/tmpl/layout.tmpl b/config/jsdoc/api/template/tmpl/layout.tmpl
index 1d108d413f..9327ba8554 100644
--- a/config/jsdoc/api/template/tmpl/layout.tmpl
+++ b/config/jsdoc/api/template/tmpl/layout.tmpl
@@ -1,7 +1,12 @@
+<?js
+var version = obj.packageInfo.version;
+?>
+<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="utf-8">
-    <title>OpenLayers 3 API Reference - <?js= title ?></title>
+    <title>OpenLayers v<?js= version ?> API - <?js= title ?></title>
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=fetch"></script>
     <script src="scripts/prettify/prettify.js"> </script>
     <script src="scripts/prettify/lang-css.js"> </script>
     <script src="scripts/jquery.min.js"> </script>
@@ -35,6 +40,10 @@
     <?js= this.partial('navigation.tmpl', this) ?>
     <div class="main">
         <h1 class="page-title" data-filename="<?js= filename ?>"><?js= title ?></h1>
+        <div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
+          <button id="latest-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+          This documentation is for OpenLayers v<span id="package-version"><?js= version ?></span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
+        </div>
         <?js= content ?>
     </div>
 </div>
diff --git a/config/jsdoc/api/template/tmpl/navigation.tmpl b/config/jsdoc/api/template/tmpl/navigation.tmpl
index 6972914432..e5fb726d14 100644
--- a/config/jsdoc/api/template/tmpl/navigation.tmpl
+++ b/config/jsdoc/api/template/tmpl/navigation.tmpl
@@ -3,7 +3,6 @@ var self = this;
 ?>
 <div class="navigation">
     <div class="search">
-        <h4 class='package-version'>v<?js= self.version ?></h4>
         <input id="search" type="text" class="form-control input-sm" placeholder="Search Documentation">
     </div>
     <ul class="list">
