@media (max-width: 767px) {
      .logo-big {
        display: block;
      }
    
      .logo-small {
        display: none;
      }
    }

The full css is here:

    .header {
      background-image: url('/img/goal-cover.jpeg');
    }
    
    .navbar .navbar-nav > li > a {
      color: inherit;
      padding-top: 0;
      padding-bottom: 0;
      font-weight: 400;
      font-size: 12px;
      border-radius: 3px;
      line-height: 58px;
    }
    
    b, strong {
      font-weight: bold;
      color: white;
    }
    
    #search {
      text-align:center;
      text-align: center;
      line-height: 57px;
      font-size: 16px;
    }
    
    input {
      width: 200px;
      padding: 0 20px;
    }
    
    input,
    input::-webkit-input-placeholder {
      font-size: 16px;
      letter-spacing: 0.5px;
      border: 0;
      background-color: #fff;
      color: #3c3e42!important;
    }
    
    .btn.btn-primary, .btn.btn-primary:hover, .btn.btn-primary:focus, .btn.btn-primary:active, .btn.btn-primary.active, .btn.btn-primary:active:focus, .btn.btn-primary:active:hover, .btn.btn-primary.active:focus, .btn.btn-primary.active:hover, .open > .btn.btn-primary.dropdown-toggle, .open > .btn.btn-primary.dropdown-toggle:focus, .open > .btn.btn-primary.dropdown-toggle:hover, .navbar .navbar-nav > li > a.btn.btn-primary, .navbar .navbar-nav > li > a.btn.btn-primary:hover, .navbar .navbar-nav > li > a.btn.btn-primary:focus, .navbar .navbar-nav > li > a.btn.btn-primary:active, .navbar .navbar-nav > li > a.btn.btn-primary.active, .navbar .navbar-nav > li > a.btn.btn-primary:active:focus, .navbar .navbar-nav > li > a.btn.btn-primary:active:hover, .navbar .navbar-nav > li > a.btn.btn-primary.active:focus, .navbar .navbar-nav > li > a.btn.btn-primary.active:hover, .open > .navbar .navbar-nav > li > a.btn.btn-primary.dropdown-toggle, .open > .navbar .navbar-nav > li > a.btn.btn-primary.dropdown-toggle:focus, .open > .navbar .navbar-nav > li > a.btn.btn-primary.dropdown-toggle:hover {
        background-color: #00bcd4;
        color: #FFFFFF;
    }
    
    .btn-full-width {
      width: 100%;
    }
    .card {
        display: inline-block;
        position: relative;
        width: 100%;
        border-radius: 3px;
        background: rgba(41, 39, 39, 0.9);
        color: #fff;
        box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    }
    
    .card-signup .content {
      padding: 0px 30px 0px 30px;
    }
    
    .big-logo-circle {
      margin: auto;
      width: 180px;
      height: 180px;
      margin-top: 50px;
      padding: 20px 0;
      border-radius: 50%;
      background: rgba(41, 39, 39, 0.9);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .signup-page .wrapper .card-signup {
        margin: 50px 0 40px;
    }
    
    .btn-red {
      background: #e90052;
      width: 100%;
    }
    
    .btn-red:hover, .btn-red:focus, .btn-red:active, .btn-red a:active{
      background: rgba(233, 0, 82, 0.8)!important;
    }
    
    .btn-blue {
      background: #096b7d;
      width: 100%;
    }
    
    .btn-blue:hover, .btn-blue:focus, .btn-blue:active, .btn-blue a:active{
      background: rgba(9, 107, 125, 0.8)!important;
    }
    
    body {
      background-color: #ddd;
    }
    
    .navbar-toggle .icon-bar {
      background-color: #333;
    }
    
    .navbar-nav > li {
      line-height: 50px;
      position: relative;
      margin-left: 15px;
      margin-right: 15px;
    }
    
    .logo, .navbar-nav > li > .btn {
      margin: 0 15px;
      height: 41px;
      margin-top: 4px;
      box-shadow: none;
      color: #fff;
    }
    
    .logo {
      background: transparent;
      height: 32px;
      margin-top: 5px;
    }
    .navbar-nav > li > .btn {
      background: rgba(0, 188, 212);
      display: flex;
      align-items: center;
      margin-top: 8px!important;
      box-shadow: none!important;
      width: 100px;
    }
    
    .navbar-nav > li > .btn:hover, .navbar-nav > li > .btn:focus, .navbar-nav > li > .btn:active {
      box-shadow: none!important;
      background: rgba(0, 188, 212, 0.8)!important;
    }
    
    .logo-big {
      display: none;
    }
    
    @media (min-width: 767px) {
      .navbar-search-form {
        position: absolute;
        left: 0;
        right: 0;
        margin: auto;
        width: 100%;
        float: none;
        text-align: center;
        padding: 8px 0;
      }
    
      .logo {
        margin-left: 0;
      }
    }
    
    @media (max-width: 767px) {
      .navbar-search-form {
        padding-left: 0;
        padding-right: 0;
      }
    
      .navbar .navbar-form .form-group .form-control, .navbar .navbar-form .form-control {
        width: 400px;
      }
    
      .logo-big {
        display: block;
      }
    
      .logo-small {
        display: none;
      }
    }
    
    @media (max-width: 500px) {
      .navbar-search-form {
        padding-left: 0;
      }
    
      .navbar .navbar-form .form-group .form-control, .navbar .navbar-form .form-control {
        width: 300px!important;
      }
    }
    
    .navbar .navbar-form .form-group {
      margin: 0;
      padding: 0;
      height: 39px;
      border: 1px solid;
      border-radius: 3px;
      line-height: 39px;
      background-color: #fff;
    }
    
    .navbar .navbar-form {
      margin: 0;
    }
    
    .navbar-header {
      margin-top: 6px;
    }
    
    .navbar-form .input-group {
      float: left;
    }
    
    .input-group .input-group-addon {
      padding: 6px 12px;
      color: #00bcd4;
    }
    
    .navbar .navbar-form .form-group .form-control, .navbar .navbar-form .form-control {
      width: 400px;
      background-image: none;
    }

    <nav class="navbar navbar-fixed-top" role="navigation">
        <div class="container">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand logo-small" href="{{ url('/') }}">
              <img class="logo" src="{{ asset('/img/logo-small.png') }}" alt="logo">
            </a>
            <a class="navbar-brand logo-big" href="{{ url('/') }}">
              <img class="logo" src="{{ asset('/img/m2.png') }}" alt="logo">
            </a>
          </div>
          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <form class="navbar-form navbar-search-form active" role="search">
              <div class="form-group">
                <div class="input-group">
                  <span class="input-group-addon">
                    <i class="material-icons">search</i>
                  </span>
                  <input type="text" class="form-control" placeholder="Search for videos or players..." autofocus>
                </div>
              </div>
            </form>
            <ul class="nav navbar-nav navbar-right">
              <li>
                <a href="{{ url('/login') }}" class="btn btn-primary">Sign in</a>
              </li>
            </ul>
          </div>
          <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
      </nav>