w3 css w3-navbar with w3-top hiding page content

Question

Using w3css with a pinned navbar (ie enclosed in a with class w3-top) how can I know the height of the navbar (which will vary with screen size) so I can leave this much space at the top of my non-pinned content so the navbar doesn't overwrite content?

My best solution so far is to duplicate the navbar in javascript and insert that at the top of the page without the w3-top class so that there is a hidden element which is always the same size at the top of the page.

...
<div id="pinned_nav" class="w3-top">
<ul class="w3-navbar w3-light-grey w3-border">
  <li>

...


<script type="text/javascript">
    //Duplicate the nav without pinning it to the top - this means that the other content will adjust to height of pinned nav
    var nav = document.getElementById("pinned_nav");
    var nav_copy = nav.cloneNode(true);
    nav_copy.classList.remove("w3-top");
    nav.parentElement.insertBefore(nav_copy, nav);
</script>

...

Since this seemed less error prone than just copy and pasting the HTML block.

But it's still rather clunky and I just wondered if there was a simpler way I was missing.

Other questions like this one which are not w3css specific suggest using a fixed margin to skip a pinned toolbar but I can't see how to determine this margin height with a responsive navbar.

Answer 1

You could use a Javascript script to get the height and append it however you want to use it.

function getHeight() {
  var nav = document.getElementById("pinned_nav");
  var nav_height = nav.offsetHeight; //append this var where you need to.
  alert(nav_height);
};

window.onload = getHeight();
window.onresize = getHeight(); //edit, added for if you resize the page

#pinned_nav {
  height: 100px;
  /*as example */
  background-color: red;
}

<div id="pinned_nav" class="w3-top"></div>

EDT

Added resize event subscription.