I have divided my header into three columns - logo, search bar, and nav.
For the navigation section, I referred to this code snippet: https://codepen.io/macsupport/pen/bKFzD as I am new to bootstrap and still learning.
When viewing on desktop size, I want the menu to be expanded horizontally, and only collapse to a menu icon when it reaches tablet size.
However, due to the fact that it is initially placed in a column one-third of the screen width, it seems like it will always be collapsed.
<header class="fixed-top" id="header">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<img src="media/logo.png" alt="Logo" class="logo">
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<form class="form-inline my-2 my-lg-0 search">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-secondary my-2 my-sm-0 orange" type="submit">
<img src="media/icons/search.png" alt="Search" class="icon">
</button>
</form>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-4">
<nav class="navbar navbar-inverse text-center" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav">
<img src="media/icons/menu.png" alt="Menu" class="icon">
</button>
</div>
<div class="collapse navbar-collapse" id="nav">
<ul class="nav navbar-nav">
<li class="nav-item align-middle"><a class="nav-link grey" href="">Home</a></li>
<li class="nav-item align-middle"><a class="nav-link grey" href="store">Products</a></li>
<li class="nav-item align-middle"><a class="nav-link grey" href="blog">Blog</a></li>
</ul>
</div>
</nav>
</div>
</div>
</div>
</header>Edit
Is there a way to make the collapsible section appear underneath the header from the side, similar to the example shown in this image?