Main Heading
<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 Section:
<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>
Built using Bootstrap 4.
The header and footer links may not be visible on mobile devices, but they are working properly on laptop/desktop screens.
If you refer to the image linked below and observe the highlighted button in the footer section, it might not be functioning correctly which results in the links not being displayed. The links on the header section are visible, but activating the toggle may not work.
https://i.sstatic.net/6mG7a.png