title: How to toggle Log In and Sign Up on specific size(media queries)?
body: <p>What i'm trying to achieve is to toggle right side of my header(from Log in and Sign Up buttons) into hamburger menu icon on the specific size of browser(when resize i want to right side disappears and go to the hamburger menu)...</p>
  
  <p>here's code:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html lang="en"&gt;
      &lt;head&gt;
        &lt;title&gt;Test&lt;/title&gt;
        &lt;link rel="stylesheet" 
   href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt;
        &lt;link rel="stylesheet" type="text/css" href="test2.css"&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
  
          &lt;div class="navbar navbar-default" role="navigation"&gt;
           &lt;div class="container-fluid"&gt;
             &lt;div class="navbar-header"&gt;
  
               &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"&gt;
                &lt;span class="sr-only"&gt;Toggle Navigation&lt;/span&gt;
                &lt;span class="icon-bar"&gt;&lt;/span&gt;
                &lt;span class="icon-bar"&gt;&lt;/span&gt;
                &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
             &lt;a class="navbar-brand" href="#"&gt;&lt;img src="images/test1.png" class="img-responsive" &gt;&lt;/a&gt;
            &lt;/div&gt;
  
          &lt;div class="navbar-collapse collapse" id="bs-example-navbar-collapse-1"&gt;
            &lt;ul class="nav navbar-nav"&gt;
              &lt;li class="active"&gt;&lt;a href="#"&gt;HOME&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;LINK&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;LINK&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;LINK&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;LINK&lt;/a&gt;&lt;/li&gt;
              &lt;li class="login1"&gt;&lt;a href="#"&gt;Log In |&lt;/a&gt;&lt;/li&gt;
              &lt;li class="login2"&gt;&lt;a href="#"&gt;Sign Up&lt;/a&gt;&lt;/li&gt;
              &lt;li class="cart"&gt;&lt;img src="images/cart.png"&gt;&lt;/li&gt;
              &lt;li class="text1"&gt;&lt;p&gt;(2)&lt;/p&gt;&lt;/li&gt;
              &lt;li class="text2"&gt;&lt;p&gt;total: $&lt;/p&gt;&lt;/li&gt;
              &lt;li class="checkout"&gt;&lt;button type="button" class="btn"&gt;BUTTON&lt;/button&gt;&lt;/li&gt;
  
            &lt;/ul&gt;
  
           &lt;/div&gt;
          &lt;/div&gt;
         &lt;/div&gt;
  
  
  
  
  
  
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>and CSS:</p>
  
  <pre><code>.navbar-header {
    min-height: 100px;
  }
  
  .navbar-nav {
    margin-top: 32px;
    margin-left: 25px;
  }
  
  .navbar-nav li {
    color: blue;
    font-size: 15px;
    font-weight: bold;
  }
  
  .navbar-nav a {
    color: rgb(60, 113, 132) !important;
  }
  
  .navbar-toggle {
    margin-top: 30px;
  }
  
  .navbar-brand {
    margin-top: 12px;
    position: relative;
    left: 20px;
  }
  
  .login1 {
    margin-left: 60px;
  }
  
  .login1 a {
    color: rgb(149, 149, 149) !important;
  }
  
  .login2 {
    margin-left: -26px;
  }
  
  .login2 a {
    color: rgb(149, 149, 149) !important;
  }
  
  .subtotal {
    display: inline;
  }
  
  .cart {
    margin-top: 10px;
    margin-left: -10px;
  }
  
  .text1 {
    margin-top: 15px;
    margin-left: 4px;
    color: rgb(149, 149, 149) !important;
  }
  
  .text2 {
    margin-top: 15px;
    color: rgb(149, 149, 149) !important;
  }
  
  .checkout button {
    background-color: rgb(108, 181, 173);
    color: #fff;
    font-weight: bold;
    margin-left: 15px;
    margin-top: 5px;
    width: 120px;
    height: 40px;
  }
  
  
  
  
  
  @media (max-width: 1335px) {
    .navbar-nav li,
    .navbar-brand img {
      position: relative;
      right: 20px;
      font-size: 13px;
    }
  
    .login1 a,
    .login2 a,
    .cart img, {
      position: relative;
      right: 15px;
    }
  }
  
  
  @media (max-width: 1249px) {
    .navbar-nav li,
     {
      position: relative;
      right: 35px;
      font-size: 12px;
    }
  
    .navbar-brand img {
      width: 147px;
      height: 56px;
    }
  
    .login1 a,
    .login2 a,
    .cart img,
    .checkout button,
    .text1 p,
    .text2 p {
      position: relative;
      right: 45px;
    }
  }
  
  
  
  @media (max-width: 1218px) {
  
  }
  
  
  
  @media (max-width: 1199px) {
    .navbar-nav li {
      font-size: 13px;
    }
  }
  </code></pre>
  
  <p>as you can see,in media query(max-width: 1218px) i want to right side disappears and go to hamburger menu..i hope i was clear</p>