javascript - Bootstrap: Stylize Border Lines in Navbar Menu -

i have been customizing header website. have been having trouble twi things.

1) search icon has border lines on top , bottom when browser shrunk. want thin bottom line , remove top line.

2) wanted add more spacing between sign in/sign when browser shrunk. possible remove sign when browser switches hamburger icon?

thanks in advance.

document.addeventlistener("touchstart", function() {}, true);

body {    background-color: #e2e2e2;  }  .navbar {    background: #00ad97;    background: -moz-linear-gradient(#24c494, #00ad97);    background: -o-linear-gradient(#00ad97, #00ad97);    background: -webkit-linear-gradient(#4a4a4a, #414042);  }  /*--------------  search button top start  --------------*/    .search-box {    transition: width 0.6s, border-radius 0.6s, background 0.6s, box-shadow 0.6s;    width: 30px;    height: 30px;    border-radius: 15px;    border: none;    cursor: pointer;    background: white;  }  .search-box + label .icon-search {    color: black;  }  .search-box:hover {    color: white;    background: #ebebeb;    box-shadow: 0 0 0 5px #3d4752;  }  .search-box:hover + label .icon-search {    color: white;  }  .search-box:focus {    transition: width 0.6s cubic-bezier(0, 1.22, 0.66, 1.39), border-radius 0.6s, background 0.6s;    border: none;    outline: none;    box-shadow: none;    padding-left: 15px;    cursor: text;    width: 150px;    border-radius: auto;    background: white;    color: black;  }  .search-box:focus + label .icon-search {    color: black;  }  .search-box:not(:focus) {    text-indent: -5000px;  }  #search-submit {    position: absolute;    display: none;  }  .icon-search {    position: relative;    left: -2.2em;    top: .42em;    color: white;    cursor: pointer;  }  /*--------------  search button top end  --------------*/    /* header logo */    .navbar-brand {    font-family: nivo;    font-size: 2em;    letter-spacing: .5px;    color: #fff !important;    padding-top: 16px;  }  .navbar-brand:hover {    transition: 0.25s;    -o-transition: 0.25s;    -ms-transition: 0.25s;    -moz-transition: 0.25s;    -webkit-transition: 0.25s;    color: #c4c4c4 !important;  }  /* header sign in */    .sign_in {    font-family: "helvetica neue", "helvetica", "arial", "lucida grande", sans-serif;    font-weight: 200;    letter-spacing: .5px;    padding-right: 15px;    font-size: small;    text-decoration: none;    color: #fff !important;  }  .sign_in:hover {    transition: 0.25s;    -o-transition: 0.25s;    -ms-transition: 0.25s;    -moz-transition: 0.25s;    -webkit-transition: 0.25s;    color: #c4c4c4 !important;    text-decoration: none;  }  .sign_in:focus {    text-decoration: none;  }  /* header sign */    .sign_up {    font-family: "helvetica neue", "helvetica", "arial", "lucida grande", sans-serif;    font-weight: 200;    font-size: small;    letter-spacing: .5px;    padding-right: 12px;    text-decoration: none;    color: #fff !important;  }  .sign_up:hover {    transition: 0.25s;    -o-transition: 0.25s;    -ms-transition: 0.25s;    -moz-transition: 0.25s;    -webkit-transition: 0.25s;    color: #c4c4c4 !important;    text-decoration: none;  }  .sign_up:focus {    text-decoration: none;  }  .menu-ul {    padding: 0;  }

<nav class="navbar navbar-inverse navbar-fixed-top">    <div class="container">      <div class="navbar-header">        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">          <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" href="/">resonance inn</a>      </div>      <div id="navbar" class="navbar-collapse collapse">        <ul class="menu-ul">          <form class="navbar-form navbar-right" action="#">            <input id="search-box" type="text" class="search-box" name="q" />            <label for="search-box"><span class="glyphicon glyphicon-search icon-search"></span>            </label>            <input type="submit" id="search-submit" />          </form>            <li style="list-style-type: none;">            <a class="navbar-text navbar-right sign_in" href="#">sign in                      </a>          </li>          <li style="list-style-type: none;">            <a class="navbar-text navbar-right sign_up" href="#">sign                      </a>          </li>        </ul>      </div>      <!--/.navbar-collapse -->    </div>  </nav>

for first question:

css

.navbar-inverse .navbar-collapse, .navbar-inverse .navbar-form {     border:none !important;  // adjust want (border-top or other) }  .navbar-form {     box-shadow: none !important; } 

demo here

for second question:

you can use bootstrap classes hide elements:

.hidden-xs  .hidden-sm  .hidden-md .hidden-lg 

link