.main-nav {
   position: fixed;
   top: 85px;
   left: 0;
   right: 0;
   z-index: 1;

   li {
      a {
         cursor: pointer;
      }

      .glyphicon {
         margin-right: 10px;
      }

      &.link-activea,
      &.link-active a:hover,
      &.link-active a:focus {
         background-color: #4189C7;
         color: white;
      }
   }
}

@media (min-width: 768px) {
   .main-nav {
      top: 100px;
      width: calc(~"25% - 30px");
      min-width: 180px;

      .navbar {
         border-radius: 0 15px 15px 0;
         border-width: 0px;
         height: 100%;

         a {
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
         }

         ul {
            float: none;
         }

         li {
            float: none;
            font-size: 15px;
            margin: 6px;

            a {
               padding: 10px 16px;
               border-radius: 4px;
            }
         }
      }

      .navbar-header {
         float: none;
      }

      .navbar-collapse {
         padding: 0px;
      }
   }
}
