I'm facing an issue with the alignment of the heading within a navigation bar, causing the links to wrap before the collapse of the nav-bar occurs -
https://i.sstatic.net/bKyPM.png
I am trying to make the links collapse earlier than they currently do. Despite going through all the solutions provided to this problem, I have not been able to find a suitable answer. Below is my latest attempt. I thought adjusting the width of the custom header using a media query might solve the problem, but it didn't work. Currently, when the links collapse, the hamburger icon is also positioned to the left of the centered text. I will address that later on.
<nav class="navbar navbar-expand-xl navbar-light bground">
<a class="navbar-brand" href="#"> NavBar Testing </a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#colNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="customHead">
<text>Centered horizontally and vertically</text>
</div>
<div class="collapse navbar-collapse" id="colNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#"> Services </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Contact Us </a>
</li>
</ul>
</div>
</nav>
.navbar-collapse {
background-color: red;
float: right;
width: 25%;
}
.navbar-nav, .nav-link{
background-color: yellow;
color: red !important;
}
.customHead {
width: 100%;
position: relative;
background: red;
}
text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -130%);
background: orange;
margin-top: 10px;
}
@media only screen and (max-width: 1200px) {
.customHead {
width: 80%;
}
.navbar-toggler {
background-color: red;
float: right;
}
}