'Responsive' webpage


  • 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">

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> ...

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>

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() {
    toggle.setAttribute('aria-expanded', !toggle.getAttribute('aria-expanded'));

further reading

click events on ios