I'm developing a theme for a custom wordpress site, and currently building out a three row navbar.
I'm wondering, is it possible to "combine" the top two navbars so that I can have one logo span the height of the two combined navbars, while still maintaining the separation of list items?
This question has been asked before for Bootstrap v3, but I'm having a hard time mapping the solution over to Bootstrap v4 with the new flexbox and grid system.
Copying from the question I linked above, I am basically trying to achieve this:
+-------------------------------------------------------------------------------+
| | Search Input Form |
| SITE LOGO |---------------------------------------------------------------+
| | Nav-B-1 Nav-B-2 Nav-B-3 Nav-B-4 |
+-------------------------------------------------------------------------------+
| Nav-C-1 Nav-C-2 Nav-C-3 Nav-C-4 Nav-C-5 |
+-------------------------------------------------------------------------------+
------Begin Body Content------
| |
V V
And then, IF POSSIBLE, I would love to shrink the main navigation back into a single navbar on mobile and tablet, while combining all of the menus EXCEPT the search together in one hamburger menu. To be honest, I thought I was lost on the first part of this question, but this second part has me even more flustered.
Collapsed Navigation (Mobile and Tablet)
+---------------------------------------------------------------------------------+
| SITE LOGO | Hamburger Menu |
+---------------------------------------------------------------------------------+
| Search Input Form Search Button |
+---------------------------------------------------------------------------------+
Expanded Navigation (Mobile and Tablet)
+---------------------------------------------------------------------------------+
| SITE LOGO | Hamburger Menu |
+---------------------------------------------------------------------------------+
| Nav-B-1 |
| Nav-B-2 |
| Nav-B-3 |
| Nav-B-4 |
| --------------------------------------------------------------------------- |
| Nav-C-1 |
| Nav-C-2 |
| Nav-C-3 |
| Nav-C-4 |
| Nav-C-5 |
+---------------------------------------------------------------------------------+
---End Expanded Menu---
+---------------------------------------------------------------------------------+
| Search Input Form Search Button |
+---------------------------------------------------------------------------------+
Is this even possible? I'm wondering if Bootstrap isn't the right framework for something like this :(
Thank you in advance for the help!!!
Here's what I've got so far:
@media screen and (min-width: 767px) {
.dropdown:hover>.dropdown-menu {
display: block;
}
}
@media screen and (max-width: 767px) {
.dropdown-toggle::after {
display: none;
}
}
@media screen and (max-width: 767px) {
nav#hide-on-mobile {
visibility: hidden;
clear: both;
display: none;
}
}<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
<nav id="hide-on-mobile" class="navbar navbar-expand-md navbar-light flex-row pb-0 pt-3">
<form class="form-inline ml-auto">
<input class="form-control form-control-sm mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-dark btn-sm my-2 my-sm-0" type="submit">Search</button>
</form>
</nav>
<nav class="navbar navbar-expand-md navbar-light flex-row">
<a class="navbar-brand mr-auto" href="<?php echo home_url(); ?>">
sandbox
</a>
<button class="navbar-toggler ml-lg-0" type="button" data-toggle="collapse" data-target="#navbarSupportedContent, #navbarSupportedContent2" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<nav class="navbar navbar-expand-md navbar-dark bg-dark py-0">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>