I need to render the following shape of navbar
COLLAPSED, it should look like this
-----------------
| Logo ≡ |
-----------------
I have used flex to have the 2 rows. How to ensure column widths stay consistent for two rows?
As in, if top-left "CONTENT" width increases, search bar will be pushed to the right.
Now the "LINK" in 2nd row should also be pushed right proportionally, like how we have with HTML tables.
Any input / help is highly appreciated. Thanks in advance.
My code so far: https://codesandbox.io/s/zq5l3o0nj4
<nav class="navbar navbar-expand-xs navbar-light bg-light">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon" />
</button>
<div class="collapse navbar-collapse flex-column" id="navbarSupportedContent">
<div class="navbar--row-1 w-100 d-flex align-items-center">
<div class="navbar--row-1--location">
<!-- Icon -->
<span class="ml-1 mr-1 navbar--row-1--location--label">
CONTENT_TOP_LEFT
</span>
<!-- Icon -->
</div>
<div class="navbar--row-1--search">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
</form>
</div>
</div>
<ul class="navbar-nav mr-auto d-flex align-items-center">
<li>
<a class="navbar-brand" href="/">
BRAND
</a>
</li>
<li class="nav-item active">
<a class="nav-link pl-0" href="/">
Home
<span class="sr-only">(current)</span>
</a>
</li>
</ul>
</div>
</div>
</nav>This is what it renders:
I am unable to get the LINK in 2nd row to be aligned with the "SEARCH BAR" section in 1st row.
