<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> window.addEventListener('DOMContentLoaded', (event) => { var newNode = document.createElement('div'); newNode.classList.add("bannernew"); newNode.insertAdjacentHTML('beforeend',`SEASONAL OFFER: ORDER A TORTA AND GET A $1 DRIP COFFEE. ORDER NOW`,); // Get the reference node var referenceNode = document.querySelector('#header'); // Insert the new node before the reference node referenceNode.parentNode.insertBefore(newNode, referenceNode); $('div.bannernew').each(function() { var link = $(this).html(); $(this).contents().wrap('<a href="/order"></a>'); }); }); </script> @media only screen and (min-width: 600px) { body #header{ padding-top:35px!important; } .bannernew{ position:absolute; text-align:center; background:#da291c; z-index:9999999999!important; top:0; width:100%; height:35px; font-size:20px; padding-top:5px; } .bannernew a { color: white !important; } } @media only screen and (max-width: 600px) { body #header{ padding-top:40px!important; } .bannernew{ position:absolute; text-align:center; background:#da291c; z-index:9999999999!important; top:0; width:100%; height:40px; font-size:14px; padding-top:5px; } .bannernew a { color: white !important; font-size: 14px; } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter