Previously, in Bootstrap 3, there was a method to achieve the following:
https://i.sstatic.net/0fkla.png
This involved adding a solid background color (orange in this case) to an <li> element within the .navbar
An example demo can be seen here: https://jsfiddle.net/p1vm4aeo/
The only custom CSS used was for the orange background, everything else followed Bootstrap 3 standards:
.orange-bg {
background-color: orange;
}
The markup looked like this:
<nav class="navbar navbar-fixed-top navbar-default" role="navigation">
<div id="navbar-collapse-1" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown orange-bg">
<a href="#">Foo</a>
</li>
</ul>
</div>
</nav>
However, with Bootstrap 4, achieving the same effect seems more challenging due to the height of the <li> inside .navbar not filling the entire navbar. The result is shown below:
https://i.sstatic.net/IM1Ae.png
The demo for Bootstrap 4 can be accessed here: https://jsfiddle.net/20ehqxsy/
The key difference in the markup lies in using the appropriate Navbar classes for Bootstrap 4 instead of 3 (.navbar-expand-lg for example):
<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light navbar-default" role="navigation">
<div id="navbar-collapse-1" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="dropdown orange-bg">
<a href="#">Foo</a>
</li>
</ul>
</div>
</nav>
Is there a way to replicate the same effect achieved with Bootstrap 3 while using Bootstrap 4?