On PC, the search navigation bar with links appears to the right of the search bar. However, this layout is not working properly on Android or iPhone devices.
I've tried solutions from different sources like using .navbar-header and enclosing the links within the .collapse class, but it didn't produce the desired result. Instead, everything shifted onto a new line, causing the search bar to span across the screen and not fit into the page properly. The full explanation can be found at: .
<th:block sec:authorize="isAuthenticated()">
<form th:action="@{/logout}" method="POST" th:hidden="true" name="logoutForm">
<input type="submit" value="logout">
</form>
</th:block>
<nav class="navbar navbar-expand-sm bg-light">
<div class="navbar-header">
<div class="collapse navbar-collapse" id="searchNavbar">
</div>
<form class="form-inline my-2 my-lg-0" th:action="@{/search}" method="GET">
<input type="search" id="item-search" name="keyword" size="50" th:value="${keyword}" class"form-control mr-sm-2"
placeholder="What are you looking for " required />
<input type="submit" value="Search" class="btn btn-outline-success my-2 my-sm-0"/>
</form>
<ul class="navbar-nav">
<th:block sec:authorize="isAuthenticated()">
<li class="nav-item">
<a class="nav-link" th:href="@{/customer}"> <b>[[${#request.userPrincipal.name}]]</b></a>
</li>
</th:block>
<li class="nav-item">
<a class="nav-link" id="cart-link" th:href="@{/cart}">Cart</a>
</li>
<th:block sec:authorize="isAuthenticated()">
<li class="nav-item">
<a class="nav-link" href="javascript: document.logoutForm.submit()">Logout</a>
</li>
</th:block>
</ul>
</div>
</div>
</nav>
</div>
While the toggle suggestion seems to function correctly, the issue persists with the search bar extending beyond the div, resulting in scrollability. For reference, please view the attached photo here: https://i.sstatic.net/xzZ0G.png
Is there a way to make the search bar collapsible while ensuring that the links appear above it without requiring selection of the navbar-toggle button? On mobile, the idea is for the links to show above the search bar, and on desktop, below the black line as depicted in the provided image, positioned before the "Toggle" button.