Bootstrap 4 search navigation bar not displaying on mobile

Question

I have the below search navigation bar with links appearing to the right of the search bar. This works fine on PC but is not working on android or Iphone devices.

I have looked at the answer from here and tried using .navbar-header and encapsulating the links within the .collapse class but it didnt work, it just put everything on a new line and the searchbar goes right across the screen and doesnt fit to page -> https://stackoverflow.com/questions/40445515/navbar-not-visible-in-mobile-display/40445579#:~:text=1%20Answer&text=Your%20entire%20navbar%20is%20wrapped,being%20hidden%20in%20mobile%20widths.&text=navbar%2Dheader%20class%20where%20your,and%20logo%20should%20be%20placed.

            <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 />
                            &nbsp;
                        <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>

The toggle suggestion appears to work but the search bar isnt limited to the div and goes all the way across the screen which then becomes scrollable - see the attached photo below:

Is there a way to have the search bar toggable but the links to appear above the search bar without needing to select the navbar-toggle button, only on mobile but on desktop to appear to the side of the Search bar i.e. just below the black line in the above photo and above the "Toggle" button?

Answer 1

Your question isn't really clear as to what your end goal is, but what you're missing is that anything inside .collapse.navbar-collapse is going to be hidden on mobile and you need a toggling mechanism to show it up. I've just added a button with the "Toggle" text and a data-target="#searchNavbar" to make sure your toggling works on mobile.

For obvious reasons, it's not looking very "pretty". But I think you can figure it out by adding proper layouting classes.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js" integrity="sha384-LtrjvnR4Twt/qOuYxE721u19sVFLVSA4hf/rRt6PrZTmiPltdZcI7q7PXQBYTKyf" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">


<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">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#searchNavbar" aria-controls="searchNavbar" aria-expanded="false" aria-label="Toggle navigation">Toggle
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="navbar-header">
    <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 /> &nbsp;
      <input type="submit" value="Search" class="btn btn-outline-success my-2 my-sm-0" />
    </form>
  </div>
  <div class="collapse navbar-collapse" id="searchNavbar">
    <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>
</nav>