The nav links become white color I guess or there is another problem. I want to make the navigation links to be visible or any other technique of navbar suggestion will also be helpful.
<header class="site-header sticky-top py-1">
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid ">
<a class="navbar-brand ms-5" href="#">Trend</a>
<a class="" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
<i class="fa-solid fa-cart-shopping" style="font-size:28px;color:grey;margin-left:24rem;"></i>
</a>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasExample"
aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title ms-5" id="offcanvasExampleLabel">Cart</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="container">
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images,
lists, etc.
</div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu list-unstyled">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
</div>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar"
aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Trend</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div class="container">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<a class="nav-link active" aria-current="page" href="#">
<li class="nav-item">
</li></a>
<li class="nav-item">
<a class="nav-link " href="#">About</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle text-dark" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
Category
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Shirt</a></li>
<li><a class="dropdown-item" href="#">Jeans</a></li>
<li><a class="dropdown-item" href="#">Shoes</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Donate</a></li>
</ul>
</li>
</ul>
</div>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</div>
</nav>
</header>I want navbar to appear inside the offcanvas. It works great in Desktop but on Mobile Devices it's font-color becomes white.