Adding a widget to main navigation area?

I need help adding a moon phase widget in the header navigation area of a website. (Is this even possible at all?)

I would source the code from this site:

https://moonphase.guide/widget

And add it like this in the example below:

Do you have an embed code? We can test it easier

<!-- © wdisseny --><div id="contain_moon" style="text-align:center;padding-top:4px;padding-bottom:4px;"><div style="font-weight:bold">Today's Moon</div><div style="margin-top:-5px;margin-bottom:-10px;padding:21px;filter:drop-shadow(0 0 21px hsl(220,100%,15%))"></div><div>.</div><div style="font-size:small">.</div></div><script>(function(){var d=new Date().getDate();var m=document.querySelectorAll("#contain_moon div");var a=new XMLHttpRequest();var url="https://www.icalendar37.net/lunar/api/?lang=en&month="+(new Date().getMonth()+1)+"&year="+(new Date().getFullYear())+"&size=70&lightColor=rgb(245,245,245)&shadeColor=rgb(17,17,17)&LDZ="+new Date(new Date().getFullYear(),new Date().getMonth(),1)/1000+"";m[1].style.height="70px";a.onreadystatechange=function(){if(a.readyState==4&&a.status==200){var b=JSON.parse(a.responseText);m[1].innerHTML=b.phase[d].svg;if(typeof moon_widget_loaded=="function")moon_widget_loaded(b);m[2].innerHTML=b.phase[d].npWidget;m[3].innerHTML="Next full moon<br>"+b.nextFullMoon}};a.open("GET",url,true);a.send()})()</script>

Thanks @tuanphan for having a look at this!

This widget would live there only for the desktop version and for the mobile I'd like to have it be in the above-the-fold area.

Can you share your site url? I just tried some code & I think we can do this