i have navbar with some links on the left , logo on the center and other links on the right and working fine on big screens but when i see it on mobile version after i click the toggle button the links on the right not showing
the left links are on ul tag like this
<ul class="nav navbar-nav me-auto left"></ul>
the right links are on ul tag like this
<ul class="nav navbar-nav ms-auto right"></ul>
and all of them are under this div
<div class="collapse navbar-collapse " id="navbarTogglerDemo03"></div>
What I have tried:
<nav id="navb" class="navbar navbar-expand-lg fixed-top">
<div class="container">
<button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class=" top-bar"></span>
<span class="middle-bar"></span>
<span class=" bottom-bar"></span>
</button>
<a class="navbar-brand" href="">
<img src= "{{asset('images/black.png')}}" alt="" />
</a>
<div class="collapse navbar-collapse " id="navbarTogglerDemo03">
<ul class="nav navbar-nav me-auto left">
<li class="nav-item ">
<a class="nav-link" href="">Home</a>
</li>
<li class="nav-item ">
<a class="nav-link" href="">About Us</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Products
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
@foreach($categories as $category)
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">{{$category->name}}</a>
<ul class="dropdown-menu">
@foreach($subcategories as $subcategory)
@if($subcategory->category_id == $category->id)
<li class="d-block">
<a class="dropdown-item" href="">
{{$subcategory->name}}</a></li>
@endif
@endforeach
</ul>
</li>
@endforeach
</ul>
</li>
<li class="nav-item ">
<a class="nav-link" href="">Contact Us</a>
</li>
</ul>
<ul class="nav navbar-nav ms-auto right">
@if(Auth::check())
@if(Auth::user()->admin==1)
<li class="nav-item">
<a class="nav-link" href="">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Categories</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">SubCategories</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">logout</a>
</li>
@endif
@endif
</ul>
</div>
</div>
</nav>
.navbar a.navbar-brand {
position: absolute;
left: 50%;
top: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
@media screen and (max-width: 850px) {
.navbar a.navbar-brand {
margin-top: 5px;
vertical-align: top;
}
.navbar .navbar-nav {
margin-top: 40px;
height: 100vh;
}
}
but when i remove the second ul tag for the right links
<ul class="nav navbar-nav ms-auto right"></ul>
and add the links with the other left links in the first ul tag above them >>
<ul class="nav navbar-nav me-auto left"></ul>
they appear in the navbar when it collapse idon't know why.
but i want the other links to be on the right