<div class="main-navbar">
<!--background-color: #e3f2fd;-->
<nav class="navbar navbar-expand-sm navbar-light" style="background-color: #343a40;">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/" style="text-decoration:none;"><h4 style="font-family:fantasy;color:#ffc266;">Home</h4></a>
</li>
<li class="nav-item">
<a class="nav-link" href="./all" data-toggle="tooltip" title="hooray!" style="text-decoration:none;"><h4 style="font-family:fantasy;color:#ffc266;">All Recipes</h4></a>
</li>
<!--
<li class="nav-item">
<a class="nav-link" href="./add" style="text-decoration:none;"><h4 style="font-family:fantasy;color:#ffc266;">Add Recipe</h4></a>
</li>
-->
<li class="nav-item">
<a class="nav-link" href="./challenges" style="text-decoration:none;"><h4 style="font-family:fantasy;color:#ffc266;">Challenges & Badges</h4></a>
</li>
<li>
<a class="nav-link" href="./about" style="text-decoration:none;"><h4 style="font-family:fantasy;color:#ffc266;">About</h4></a>
</li>
<li>
<a class="nav-link" href="./contacts" style="text-decoration:none;"><h4 style="font-family:fantasy;color:#ffc266;">Contact Us</h4></a>
</li>
<!--
<li>
<a class="nav-link" href="./contacts" style="text-decoration:none;"><h4 style="font-family:fantasy;color:#ffc266;">Login</h4></a>
</li>
-->
</ul>
<!--
<span class="navbar-text">
<a href="#" style="text-decoration:none;">Login</a>
</span>
-->
</nav>
</div>
<div class="mobile-main-navbar pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<!--
<h4 class="text-white">Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
-->
<nav>
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="/" style="text-decoration:none;"><h4 style="font-family:fantasy;color:#ffc266;">Home</h4></a>
</li>
<li class="nav-item">
<a class="nav-link" href="./all" data-toggle="tooltip" title="hooray!" style="text-decoration:none;"><h4 style="font-family:fantasy;color:#ffc266;">All Recipes</h4></a>
</li>
<li class="nav-item">
<a class="nav-link" href="./add" style="text-decoration:none;"><h4 style="font-family:fantasy;color:#ffc266;">Add Recipe</h4></a>
</li>
<!--
<li class="nav-item">
<a class="nav-link" href="./challenges" style="text-decoration:none;"><h4 style="font-family:fantasy;color:#ffc266;">Challenges/Badges</h4></a>
</li>
-->
<li>
<a class="nav-link" href="./about" style="text-decoration:none;"><h4 style="font-family:fantasy;color:#ffc266;">About</h4></a>
</li>
<li>
<a class="nav-link" href="./contacts" style="text-decoration:none;"><h4 style="font-family:fantasy;color:#ffc266;">Contact Us</h4></a>
</li>
</ul>
<span class="navbar-text">
<a href="#" style="text-decoration:none;">Login</a>
</span>
</nav>
</div>
</div>
<nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>