html - Bootstrap line break between nav bar -
hi guys trying use bootstrap can make line break between each of nav menu
for example
hi | hi1 | h3
i need bar @ end not show after h3
i have tried far not working, pushing nav functions down bottom.
htmkl:
<div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <div class="logo"> <img src="image/logo.png" class="img-responsive"/> </div> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">home</a></li> <li><a href="#about">about</a></li> <li><a href="#about">login</a></li> <li><a href="#about">become member</a></li> </ul> </div><!--/.nav-collapse --> </div> </div> css:
.navbar-default .navbar-nav > li + li:before { content: ""; display: inline-block; vertical-align: middle; border-left: 1px solid #ffffff; height: 2.5em; } for reason create lines pushs texts down
here's example of how can pseudo elements (:after). dont need positioning rules using (which cause of misaligned links). use position: absolute , apply height.
as far last li, use :last-child:after remove border.
working example snippet (with active class)
@media (min-width: 768px) { .navbar.navbar-default .navbar-nav .active:after { content: ""; border: none; } .navbar.navbar-default .navbar-nav > li:after { content: ""; border-right: 2px solid #000; position: absolute; height: 50%; right: 0; top: 25%; } .navbar.navbar-default .navbar-nav > li:last-child:after { border: none; } } .navbar.navbar-default .navbar-brand { padding-top: 0; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <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"> <img src="http://placehold.it/50x50" /> </a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li class="active"><a href="#">home</a> </li> <li><a href="#about">about</a> </li> <li><a href="#about">login</a> </li> <li><a href="#about">become member</a> </li> </ul> </div> <!--/.nav-collapse --> </div> </div>working example snippet without active
@media (min-width: 768px) { .navbar.navbar-default .navbar-nav .active:after { content: ""; border: none; } .navbar.navbar-default .navbar-nav > li:after { content: ""; border-right: 2px solid #000; position: absolute; height: 50%; right: 0; top: 25%; } .navbar.navbar-default .navbar-nav > li:last-child:after { border: none; } } .navbar.navbar-default .navbar-brand { padding-top: 0; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <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"> <img src="http://placehold.it/50x50" /> </a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">home</a> </li> <li><a href="#about">about</a> </li> <li><a href="#about">login</a> </li> <li><a href="#about">become member</a> </li> </ul> </div> <!--/.nav-collapse --> </div> </div>example snippet mobile
.navbar.navbar-default .navbar-nav .active:after { content: ""; border: none; } .navbar.navbar-default .navbar-nav > li:after { content: ""; border-right: 2px solid #000; position: absolute; height: 50%; top: 25%; } @media (min-width: 768px) { .navbar.navbar-default .navbar-nav > li:after { right: 0; } .navbar.navbar-default .navbar-nav > li:last-child:after { border: none; } } .navbar.navbar-default .navbar-brand { padding-top: 0; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <div class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <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"> <img src="http://placehold.it/50x50" /> </a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">home</a> </li> <li><a href="#about">about</a> </li> <li><a href="#about">login</a> </li> <li><a href="#about">become member</a> </li> </ul> </div> <!--/.nav-collapse --> </div> </div>
Comments
Post a Comment