JSFiddle - React, Tailwind, and code Playground

HTML

<header id="header"></header>
<footer id="footer"></footer>

CSS

header, footer{
  width:100%;
  height:100px;
  float:left;
}
header{
  background:#cccccc;
}
footer{
  background:#000000;
}
.navigation{
  display:block;
  background:#ffffff;
  width:300px;
  height:20px;
  margin:5px auto;
}

JavaScript

var div = document.createElement('div');
  div.className = "navigation";
  div.innerHTML = "Your panel navigation";
  
var screenWindows = window.innerWidth;
    if (screenWindows >= 320 && screenWindows <= 480) {
       var f = document.getElementsByTagName('footer');
       f[0].appendChild(div);
    } else if (screenWindows >= 480) {
       var h = document.getElementsByTagName('header');
       h[0].appendChild(div);
    }