title: Draw a small vertical line with navbar
body: <p>I need to draw a <strong>small vertical line</strong> that should be appear after every navbar li.</p>
  
  <p>Buut the issue is whenever I try to draw something, navbar gets messed up and the navbar goes into second lines. I cant really draw a vertical line either.here's the code</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;
      &lt;title&gt;Double Double&lt;/title&gt;
      &lt;link rel="shortcut icon"  href="favicon.ico"&gt;
      &lt;link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700%7CRoboto+Slab:400,100' rel='stylesheet' type='text/css' /&gt;
      &lt;link href="css/font-awesome.min.css" rel="stylesheet"&gt;
      &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link href="css/double.css" rel="stylesheet"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;nav class="navbar" role="navigation"&gt;
      &lt;div class="container"&gt;
          &lt;!-- Brand and toggle get grouped for better mobile display --&gt;
          &lt;div style="margin: auto;display: table;"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"&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;/div&gt;
  
              &lt;!-- Collect the nav links, forms, and other content for toggling --&gt;
              &lt;div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                      &lt;hr class="vertical"/&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Deals&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Pickup Deals&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Menu&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;&lt;!-- /.navbar-collapse --&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>/*navbar properties */
  .navbar .brand {
      max-height: 40px;
      overflow: visible;
      padding-top: 0;
      padding-bottom: 0;
  }
  .navbar a.navbar-brand {
      padding: 9px 15px 8px;
  }
  .navbar{
      font-family: young;
      clear: both;
  }
  .navbar a{
      color: #515254;
  }
  .navbar-nav{
      font-size: 20px;
      padding-top: 20px;
  }
  #bs-example-navbar-collapse-1{
      float: left;
  }
  .nav &gt; li &gt; a:hover, .nav &gt; li &gt; a:focus{
      color: #007f3d;
      background: none;
  }
  .navbar-toggle .icon-bar {
      background-color: black;
  }
  
  .navbar-toggle {
      border: 1px solid #000;
  }
  .verticalLine {
      border-left: thick solid #ff0000;
  }
  hr.vertical
  {
      color: black;
      width: 0px;
      height: 100%; /* or height in PX */
  }
  /*navbar properties */
  </code></pre>
  
  <p><a href="https://jsfiddle.net/0eg74ob0/" rel="noreferrer">JSFIDDLE</a></p>