Draw a small vertical line with navbar
<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>