horizontal divider or empty line when collpase navbar-collapse - html

Question

below is my current navbar setup...
I want to add a blank line OR horizontal diver between the two <ul> within the nav bar id="navbarsExample04"
how would I go about adding this blank item or horizontal divider only when the navbar is collapsed?
<nav class="navbar navbar-expand-sm navbar-light">
<a class="navbar-brand" href="#">
<img src="..">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04"
(click)="toggleCollapsed()" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample04" [ngClass]="{'collapse': collapsed, 'navbar-collapse': true}">
<ul class=" navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link navlinks" href="#">todo</a>
</li>
<li class="nav-item">
<a class="nav-link navlinks" href="#">todo</a>
</li>
<li class="divider-vertical"></li>
</ul>
## ADD A DIVIDER HERE WHEN COLLAPSED
<ul class=" navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link navlinks" href="#">contact</a>
</li>
</ul>
</div>
</nav>

Answer 1

How about an <hr> with Bootstrap's baked-in responsive display classes to show or hide it as needed?
<hr class="d-block d-sm-none">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-md navbar-light">
<a class="navbar-brand" href="#"><img src=".."></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample04" [ngClass]="{'collapse': collapsed, 'navbar-collapse': true}">
<ul class=" navbar-nav mr-auto">
<li class="nav-item"><a class="nav-link navlinks" href="#">todo</a></li>
<li class="nav-item"><a class="nav-link navlinks" href="#">todo</a></li>
<li class="divider-vertical"></li>
</ul>
<hr class="d-block d-md-none">
<ul class=" navbar-nav ml-auto">
<li class="nav-item"><a class="nav-link navlinks" href="#">contact</a></li>
</ul>
</div>
</nav>
Note: I've modified the collapse point in this example to ensure that it displays collapsed when you run the code snippet. The d-md-none class will likely need to be modified to reflect the correct break-point at which you want to ensure the horizontal line is no longer visible.

Answer 2

Add this style
.navbar-collapse.collapse.show ul:first-child {
border-bottom: 1px solid #aaa;
}
.navbar-collapse.collapse.show ul:first-child {
border-bottom: 1px solid #aaa;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-sm navbar-light">
<a class="navbar-brand" href="#">
<img src="..">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" (click)="toggleCollapsed()" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample04" [ngClass]="{'collapse': collapsed, 'navbar-collapse': true}">
<ul class=" navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link navlinks" href="#">todo</a>
</li>
<li class="nav-item">
<a class="nav-link navlinks" href="#">todo</a>
</li>
<li class="divider-vertical"></li>
</ul>
## ADD A DIVIDER HERE WHEN COLLAPSED
<ul class=" navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link navlinks" href="#">contact</a>
</li>
</ul>
</div>
</nav>