Media queries

HTML

<ul class="nav">

    <li><a href="#">Home</a></li>
    <li><a href="#">Main</a></li>
    <li><a href="#">Info</a></li>
    <li><a href="#">Contact</a></li>
    
    <form class="form-inline">
  <div class="form-group">
    <label class="sr-only" for="exampleInputAmount">Amount (in dollars)</label>
    <div class="input-group">
      <div class="input-group-addon">$</div>
      <input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
      <div class="input-group-addon">.00</div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Transfer cash</button>
</form>
    
</ul>

CSS

/* Default styles */

ul {
    list-style:none;
    margin:0;
    padding:0;
}

ul li{
    float:left;
    margin:0 2px 0 0;
}

ul li a{
    text-decoration:none;
    font-size:1.8em;
    display:block;
    padding:5px 10px;
    background-color:#ccc;
    border-radius:5px;
    border:1px solid #999;
    color:#000;
}

ul li a:hover{
    color:#999;
    background-color:#f9f9f9;
}

/* This is what we want when its small */
ul.mobile li{
    display:block;
    float:none;
    margin:0 0 2px 0;
}

/* Add your @media queries to handle this style change instead of a class */