@mixin floating-above() {
  background-color: #3590e3;
  position: relative;
  padding: 20px;
  border-width: 1px 0;
  border-style: solid;
  border-color: lighten(#3590e3, 25);
  >ul {
    >li {
      float: none;
      >a {
      }
    } /* />li */
  } /* />ul */
}

@media (max-width: $screen-xs-max) {
  body {

    .website-container {

      header {

        .logo-container {

          .logo-image {
            background-image: url("../images/logo_mini.png");
            width: 137px;
            height: 39px;
          } /* /.logo-image */

        } /* /.logo-container */

        nav#top-navbar {
          margin: 5px -15px;
          @include floating-above();
        } /* /nav#top-navbar, .side-navbar-container */

      } /* /header */

      .content-container {

        .side-navbar-container {
          padding: 0;
          >nav#side-navbar {
            @include floating-above();
          }
          /* /nav#side-navbar */
        } /* /.side-navbar-container */
      } /* /.content-container */

    } /* /.website-container */

    footer {
      flex-wrap: wrap;
      .nav {
        border-bottom: 1px solid #3081cb;
        flex-grow: 2;
        padding: 0 15px;
      }
      .copyright {
        border-#{$leftDirection}: 1px solid #3081cb;
      }
    } /* /footer */

  } /* /body */
}