Bootstrap Header and Footer not showing links on mobile devices - html

Question

Header
<div class="col">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<a class="navbar-brand" th:href="#{/}">
<img alt="Site Logo" height="50" th:src="#{images/logo8.png}" />
</a>
<button class=navbar-toggler type="button" data-toggle="collapse" data-target="#mainNavbar.#search">
<span class="navbar-toggler-icon"> </span>
</button>
<div class="collatpse navbar-collapse" id="mainNavbar">
<ul class="navbar-nav">
<!--- dynamic header ends -->
<th:block sec:authorize="!isAuthenticated()">
<li class="nav-item">
<a class="nav-link" th:href="#{/login}">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" th:href="#{/register}">Register</a>
</li>
</th:block>
<li class="nav-item">
<a class="nav-link" th:href="#{/contact}">Contact</a>
</li>
</ul>
</div>
</nav>
</div>
footer:
<div class="col">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-targer="#main" >
<span class="navbar-toggler-icon"> </span>
</button>
<div class="collapse navbar-collapse" id="mainFooterNavbar">
<ul class="navbar-nav">
<th:block th:each="footerMenu : ${footerMenuItems}">
<li class="nav-item">
<a class="nav-link" th:href="#{'/m/' + ${footerMenu.alias}}">[[${footerMenu.name}]] </a>
</li>
</th:block>
<li class="nav-item">
<a class="nav-link" th:href="#{/about}">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" th:href="#{/registerCompany}">Register your Business?</a>
</li>
</ul>
</div>
</nav>
</div>
Using bootstrap 4.
Header and footer links are not displaying on mobile devices but work fine on laptop/desktop.
If you look at the below image and see the highlighted(squared in image) button nothing happens on the footer and no links are displayed. The links are displayed on the header but again selecting the toggle nothing happens.

Answer 1

Your data target is not set correctly for the header, you have it set to the wrong element.
This line
<button class=navbar-toggler type="button" data-toggle="collapse" data-target="#mainNavbar.#search">```
should be:
``` <button class=navbar-toggler type="button" data-toggle="collapse" data-target="#mainNavbar">
The footer looks wrong also. You are toggling on an element id that does not exist.