/* Set height of the grid so .sidenav can be 100% (adjust if needed) */
  .row.content {height: 1500px}

  /* Set gray background color and 100% height */
  .sidenav {
    background-color: #f1f1f1;
    height: 100%;
  }

  /* Set black background color, white text and some padding */
  footer {
    background-color: #555;
    color: white;
    padding: 15px;
    position: fixed;
  }

  /* On small screens, set height to 'auto' for sidenav and grid */
  @media screen and (max-width: 767px) {
    .sidenav {
      height: auto;
      padding: 15px;
    }
    .row.content {height: auto;} 

    .navbar a {
    float: inherit !important;
    padding: 20px !important; 
    display: block;
    color: #blue;
    text-align: center;
    text-decoration: none;
    font-size: 17px;
  }

  .navbar {
    overflow: hidden;
    background-color: #F0F0F0;
    position: fixed;
    bottom: 0;
    width: inherit !important;
}
footer {
    background-color: #555;
    color: white;
    padding: 0px !important;
    position: fixed;
}

  }

  .navbar {
    overflow: hidden;
    background-color: #F0F0F0;
    position: fixed;
    bottom: 0;
    width: 9%;
  }

  .navbar a {
    float: left;
    display: block;
    color: #blue;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
  }

  .navbar a:hover {
    background: #3777B4;
    color: white;
  }

  .navbar a.active {
    background-color: #4CAF50;
    color: white;
  }