https://www.elegantthemes.com/blog/divi-resources/how-to-create-a-slide-in-top-bar-ad-with-the-divi-code-module

This banner is displayed on top/over the navigation. Alternative: Push down banner.

Add the below code in the Divi integration » header for side wide display. Or in a code module on a single page.
Change the seconds and text in the highlighted lines.

<style>
.at-banner  {
     z-index:  999999;
     position:  fixed;
     top:  0;
     right:  0;
     left:  0;
     background:  #006557;
     width:  100%;
     border-bottom:  1px solid #EEEEEE;
     padding:  10px;
     box-sizing:  border-box;
     -webkit-transform:  translateY(-150%);
     transform:  translateY(-150%);
     color:  #FFFFFF;
     font-family:  "Open Sans",  sans-serif;
     -webkit-font-smoothing:  antialiased;
     -moz-osx-font-smoothing:  grayscale;
     -webkit-animation:  at-banner-slide-in 0.8s ease forwards;
     animation:  at-banner-slide-in 3s ease forwards;
 }
 .at-banner__content  {
     display:  flex;
     align-items:  center;
     flex-direction:  row;
     justify-content:  center;
     width:  90%;
     margin:  0 auto;
     padding:  10px 40px;
     box-sizing:  border-box;
 }
 .at-banner__title  {
     font-size:  18px;
 }
 .at-banner__text  {
     margin:  0 20px 0 0;
 }
 .at-banner__button  {
     display:  inline-block;
     background:  #FFFFFF;
     height:  40px;
     border:  0;
     border-radius:  2px;
     box-shadow:  0 2px 4px rgba(0,  0,  0,  0.1);
     padding:  0 20px;
     color:  #006557;
     font-size:  12px;
     font-weight:  700;
     line-height:  40px;
     text-decoration:  none;
     white-space:  nowrap;
 }
 .at-banner__close  {
     position:  absolute;
     top:  50%;
     right:  20px;
     width:  20px;
     height:  20px;
     -webkit-transform:  translateY(-50%);
     transform:  translateY(-50%);
     cursor:  pointer;
 }
 .at-banner__close:before,  .at-banner__close:after  {
     content:  "";
     position:  absolute;
     top:  50%;
     left:  50%;
     display:  block;
     background:  #FFFFFF;
     width:  100%;
     height:  3px;
     border-radius:  2px;
     -webkit-transform-origin:  center;
     transform-origin:  center;
 }
 .at-banner__close:before  {
     -webkit-transform:  translate(-50%,  -50%) rotate(-45deg);
     transform:  translate(-50%,  -50%) rotate(-45deg);
 }
 .at-banner__close:after  {
     -webkit-transform:  translate(-50%,  -50%) rotate(45deg);
     transform:  translate(-50%,  -50%) rotate(45deg);
 }
 @-webkit-keyframes at-banner-slide-in  {
     0%  {
     -webkit-transform:  translateY(-150%);
     transform:  translateY(-150%);
 }
 100%  {
     -webkit-transform:  translateY(0%);
     transform:  translateY(0%);
 }
 }
 @keyframes at-banner-slide-in  {
     0%  {
     -webkit-transform:  translateY(-150%);
     transform:  translateY(-150%);
 }
 100%  {
     -webkit-transform:  translateY(0%);
     transform:  translateY(0%);
 }
 }
 </style>
<!-- Credits - Andy Tran (https://andytran.me) -->  
<div class="at-banner">
 <div class="at-banner__content">
 <div class="at-banner__text">Op 11 en 12 oktober zijn wij ivm werkzaamheden telefonisch slecht bereikbaar. Stuur ons aub een e-mail als u ons niet kunt bereiken.</div> <a class="at-banner__button" href="https://www.bakkerinvorden.nl/contact/">Contactgegevens</a>
 </div>
 <div class="at-banner__close">
</div>
 </div>
<script>jQuery('.at-banner__close').on('click',  function ()  {
     jQuery(this).parent().remove();
 }
);
</script>
Code language: HTML, XML (xml)