<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function() { $('<ul class="theader"><li><a href="tel:0064211536753"><svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24"><path d="M20 22.621l-3.521-6.795c-.008.004-1.974.97-2.064 1.011-2.24 1.086-6.799-7.82-4.609-8.994l2.083-1.026-3.493-6.817-2.106 1.039c-7.202 3.755 4.233 25.982 11.6 22.615.121-.055 2.102-1.029 2.11-1.033z"/></svg> +64 21 1536 753</li><li><a href="https://google.com">Get Started</a></li></ul>').appendTo('.header-title-nav-wrapper'); }); </script> <style> .header-title-nav-wrapper { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } ul.theader { list-style: none; padding-left: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-family: Poppins; font-weight: 500; } ul.theader>li:last-child a { background: #a3dc18; padding: 10px 20px; border-radius: 0px; margin-left: 10px; margin-right: 20px; color:#2a282a } .theader svg { fill: #a3dc18; width: 18px; height: 18px; } @media screen and (max-width:1024px) { ul.theader {display:none;} } </style>
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