Is it possible to make 2 navbars with one logo and align both left and right on both bars?

Question

Here is what I wanted on my Bootstrap 4's navbar... https://i.stack.imgur.com/ciQDB.png

I was started with one navbar, but I decided to go with two navbar and tried to use samples from previous answers.

Bootstrap 4: Navbar with logo and 2 rows Bootstrap 4 navbar with 2 rows

Here is my current code.

<nav class="navbar navbar-expand-md navbar-light bg-primary">
  <a class="navbar-brand" href="index.php"><img src="/zc157/images/logos/logo.svg" alt="Homepro Logo" style="width:200px;"></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse w-100 flex-md-column" id="navbarCollapse">
        <ul class="navbar-nav ml-auto small mb-2 mb-md-0">
            <?php if (zen_is_logged_in() && !zen_in_guest_checkout()) { ?>
              <li class="nav-item">
                <a class="text-white nav-link" href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a>
              </li>
              <li class="nav-item">
                <a class="text-white nav-link" href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a>
              </li>
            <?php
              } else {
                if (STORE_STATUS == '0') {
            ?>
              <li class="nav-item">
                <a class="text-white nav-link" href="#">Sign Up</a>
              </li>
              <li class="nav-item">
                <a class="text-white nav-link" href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a>
              </li>
            <?php } } ?>
            <?php if ($_SESSION['cart']->count_contents() != 0) { ?>
              <li class="nav-item">
                <a class="text-white nav-link" href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a>
              </li>
              <li class="nav-item">
                <a class="text-white nav-link" href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a>
              </li>
            <?php }?>
        </ul>
        <ul class="navbar-nav mr-auto mb-2">
            <li class="nav-item">
                <a class="text-white nav-link py-1" href="medical-equipment-rental-ezp-9.html">Rentals</a>
            </li>
            <li class="nav-item">
                <a class="text-white nav-link py-1" href="faq-ezp-8.html">FAQ</a>
            </li>
            <li class="nav-item">
                <a class="text-white nav-link py-1" href="about-us-ezp-2.html">About Us</a>
            </li>
            <li class="nav-item">
                <a class="text-white nav-link py-1" href="index.php?main_page=contact_us">Contact Us</a>
            </li>
            <li class="nav-item">
                <a class="text-white nav-link py-1" href="http://blog.homepromedical.com/" rel="nofollow">Blog</a>
            </li>
        </ul>
        <ul class="navbar-nav ml-auto mb-2">
        <?php if (zen_is_logged_in() && !zen_in_guest_checkout()) { ?>
          <li class="nav-item">
            <a class="text-white nav-link" href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a>
          </li>
          <li class="nav-item">
            <a class="text-white nav-link" href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a>
          </li>
        <?php
          } else {
            if (STORE_STATUS == '0') {
        ?>
          <li class="nav-item">
            <a class="text-white nav-link" href="#">Sign Up</a>
          </li>
          <li class="nav-item">
            <a class="text-white nav-link" href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a>
          </li>
        <?php } } ?>
        <?php if ($_SESSION['cart']->count_contents() != 0) { ?>
          <li class="nav-item">
            <a class="text-white nav-link" href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a>
          </li>
          <li class="nav-item">
            <a class="text-white nav-link" href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a>
          </li>
        <?php }?>
        </ul>
        <form class="form-inline flex-nowrap bg-light mr-0 ml-3 mx-rg-auto rounded p-1">
          <input class="form-control" type="search" placeholder="Search" aria-label="Search">
          <button class="btn btn-outline-success" type="submit">Search</button>
        </form>
    </div>
</nav>

So I want to get 2 navbar that shown in the image section of "What I wanted."

score 0 · Accepted Answer · edited Jun 20 '20 at 09:12

First of all, you didn't specify how you want the navbar to look like in small screen so I am going to guess the placement of the search bar and the signup / login bar.

It looks like the signup / login bar will be always on top of the search bar. Hence the container that contains them could be a flexbox displayed as column.

And then the rest is easy. The collapsible navbar could be a flexbox displayed as column in small screens but as row with space-between justify content.

Layout

<nav>
    <a class="navbar-brand"></a>
    <button class="navbar-toggler"></button>
    <div class="collapse justify-content-md-between align-items-md-end">
        <ul class="navbar-nav">
            <a class="nav-link">Rentals</a>
            <a class="nav-link">FAQ</a>
            ...
        </ul>
        <div class="d-flex flex-column align-items-md-end">
            <ul class="navbar-nav small">
                <a class="nav-link">Sign Up</a>
                <a class="nav-link">Log In</a>
            </ul>
            <form>
                <div class="input-group">Search</div>
            </form>
        </div>
    </div>
</nav>

.justify-content-md-between forces the collapsible to display the main menu and the signup / login and search bar separately after md breakpoint.
.align-items-md-end forces the collapsible to display the items bottom aligned after md breakpoint.
.align-items-md-end on the signup /login and search bar container forces to display them as right justified after md breakpoint because the container is displayed as column.

demo: https://jsfiddle.net/davidliang2008/rxzyh6oe/16/

Search bar, login and then other menus for Mobile?

With the previous layout I mentioned, you can display the flex column on reverse order on the Signup / login and search bar container, as well as the collapsible for Mobile.

You can also change the layout to work that way first for Mobile, and then apply custom css classes to make them work the way you want for larger screens. I think this is called Progressive Advancement?

<nav>
    <a class="navbar-brand"></a>
    <button class="navbar-toggler"></button>
    <div class="collapse justify-content-md-between align-items-md-end flex-md-row-reverse">
        <div class="d-flex flex-column align-items-md-end flex-md-column-reverse">
            <form>
                <div class="input-group">Search</div>
            </form>
            <ul class="navbar-nav small">
                <a class="nav-link">Sign Up</a>
                <a class="nav-link">Log In</a>
            </ul>
        </div>
        <ul class="navbar-nav">
            <a class="nav-link">Rentals</a>
            <a class="nav-link">FAQ</a>
            ...
        </ul>
    </div>
</nav>

.flex-md-row-reverse on collapsible: reverse the sign in container and other menu items on larger screens
.flex-md-column-reverse on sign in container: reverse the sign up / login container and the search bar on larger screens

demo: https://jsfiddle.net/davidliang2008/rxzyh6oe/37/

Is it possible that I can rearrange the menu for mobile (e.g. push the search bar to the top, login to second, and other menus the rest?) — PanK, Jun 20 '19 at 16:41

Is it possible to make 2 navbars with one logo and align both left and right on both bars?

1 Answers1

Layout

Search bar, login and then other menus for Mobile?