On my website, I am using the navbar navbar-expand-xl class to hide my navigation menu. It works correctly for resolutions lower than 1200px, but the collapse button disappears at 1000px and then reappears. How can I modify this so that the collapse button is visible at less than 1200px, not 1000px?
Here is the relevant code snippet:
<nav class="navbar navbar-expand-xl navbar-dark fixed-top menu-nawigacyjne">
<a class="navbar-brand" href="#">Insurance Group</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
Menu<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="p-2 text-white" href="/stronaGlowna">Strona Główna </a>
</li>
<li class="nav-item active">
<a class="p-2 text-white" href="/przegladajUbezpieczenia">Ubezpieczenia </a>
</li>
<li class="nav-item active">
<a class="p-2 text-white" href="/informacje">Informacje </a>
</li>
</ul>
<div class="login-form">
<form action ="/stronaGlowna" method = "post" class="form-inline mt-2 mt-md-0">
<input class="form-control mr-sm-2" type="text" id ="login" name = "login" placeholder="Adres e-mail" required >
<input class="form-control mr-sm-2" type="password" id = "haslo" name = "haslo" placeholder="Hasło" required >
<input type="hidden" name="_csrf" value="f20d6efe-5ecb-4368-bada-a55dfdd67fb5" />
<button class="btn btn-success custom-width" type="submit">Zaloguj się</button>
<a class="p-2 text-white" href="/przypomnijHaslo">Nie pamiętam hasła </a>
</form>
</div>
</div>
</nav>
You can view the live version here: