Vertical line navigation bar

/*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 > li > a:hover, .nav > li > 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 */

Source: stackoverflow.com

Vertical line navigation bar

<!DOCTYPE HTML>
<html>
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Double Double</title>
    <link rel="shortcut icon"  href="favicon.ico">
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700%7CRoboto+Slab:400,100' rel='stylesheet' type='text/css' />
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/double.css" rel="stylesheet">
</head>

<body>
<nav class="navbar" role="navigation">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div style="margin: auto;display: table;">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="#">Home</a></li>
                    <hr class="vertical"/>
                    <li><a href="#">Deals</a></li>
                    <li><a href="#">Pickup Deals</a></li>
                    <li><a href="#">Menu</a></li>
                    <li><a href="#">About Us</a></li>
                    <li><a href="#">Contact Us</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div>
    </div>
</nav>
</body>
</html>

Source: stackoverflow.com

Similar codes

3 votes129 views2 answers
Html prevent newline
Html
-6 votes118 views2 answers
How do you make a heading in html\
Html
0 vote110 views1 answer
Geolocalizacion html5
Html
0 vote138 views1 answer
Not allowed to load local resource
Html
0 vote120 views1 answer
What is base_body.html in open edx
Html
1 vote109 views1 answer
Html required checkbox
Html
11 votes108 views5 answers
Aos
Html
0 vote121 views1 answer
Email confirmation html template
Html
0 vote112 views1 answer
<iframe src="//content.jwplatform.com/players/V2BtPQRy-eMYSo360.html" width="480" height="270" frameborder="0" scrolling="auto"></iframe>
Html
12 votes131 views3 answers
Vue form
Html