'Responsive' webpage

TL;DR:

How to make side navigation bar disappear for small viewport widths
How to summon a dropdown menu with a clickable button, once the side navigation bar has disappeared

Both, side nav and collapsable header nav are always present and appear/disappear by css rules depending on viewport width. The click of a button appends/removes a css class to the dropdown menu div.

side nav

The side nav appears dynamically with viewport width. It is contained in the following div

<div class="d-none d-md-block">
  <nav>...</nav>
</div> 

with the according styles

@media (min-width: 768px) {
.d-md-block {
    display: block !important;
}
}
.d-none {
    display: none !important;
}

top nav

The top nav should only appear on clicking a button, which is only present on small width

<button class="d-md-none site-header-toggle">
  ... <svg> or <img> ...
</button>

The rules of the button make sure that it disappears when viewport width reaches a min-width

@media (min-width: 768px) {
.d-md-none {
    display: none !important;
}
}
.site-header-toggle {
    display: inline-block;
    padding: 0 10px;
    margin-right: -5px;
    border-radius: 3px;
    border: 1px solid transparent;
}

The actual top nav is in another div (usually close to the button)

<div class="site-header (open)"> <!-- open is toggled by button -->
  <nav class="site-header-nav d-none">...</nav>
</div>

with according display rule

.site-header.open .site{
    display: block !important;
}

Because of the d-none class the nav is not visible. With a click event on the button the site-header gets an additional open.

var toggle = document.querySelector('.site-header-toggle');
var siteHeader = document.querySelector('.site-header');

toggle.addEventListener('click', function() {
    siteHeader.classList.toggle('open');
    toggle.setAttribute('aria-expanded', !toggle.getAttribute('aria-expanded'));
});