Here is my customized Bootstrap navbar:
<div class="container-fluid bg-secondary">
<nav class="navbar utep-nav navbar-inverse navbar-expand-lg">
<button class="ut-toggler navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse " id="navbarSupportedContent">
<ul class="navbar-nav bg-secondary">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown">
Products
</a>
<div class="dropdown-menu bg-secondary">
<a class="dropdown-item" href="#">Product 1</a>
<a class="dropdown-item" href="#">Product 2</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
</div>
</nav>
</div>Instead of the default breakpoints, I have set custom breakpoints like so:
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 1250px,
xl: 1365px
) ;
Although the custom breakpoints are functioning well with .d-block .d-*-none, the "navbar-expand-lg" is not behaving as expected. The navbar expands at 992px (default bootstrap value) rather than 1250px as defined.
Any suggestions on how to get the navbar to expand at 1250px instead of the default 992px would be greatly appreciated.
Thank you