Можно ли сделать 2 навигационные панели с одним логотипом и выровнять их слева и справа на обеих панелях?

Question

Вот что я хотел на панели навигации моего Bootstrap 4 ... https://i.imgur.com/q41ySWC.png

Я запустился с одной панелью навигации, но я решил использовать две панели навигации и попытался использовать примеры из предыдущих ответов.

Bootstrap 4: Navbar с логотипом и 2 рядами Bootstrap 4 navbar с 2 рядами

Вот мой текущий код.

<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>

Итак, я хочу получить 2 панели навигации, показанные в разделе изображений «Что я хотел».

Answer 1

Прежде всего, вы не указали, как вы хотите, чтобы навигационная панель выглядела на маленьком экране, поэтому я собираюсь угадать расположение панели поиска и строки регистрации / входа в систему.

Это выглядиткак панель регистрации / входа всегда будет в верхней части панели поиска.Следовательно, контейнер, в котором они содержатся, может представлять собой flexbox, отображаемый в виде столбца.

А в остальном все просто.Свертываемая панель навигации может представлять собой flexbox, отображаемый в виде столбца на небольших экранах, но в виде строки с space-between выравниванием содержимого.

Макет

<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 заставляет свертываемое изображение отображатьГлавное меню и строка регистрации / входа в систему и поиска отдельно после точки останова md.
• .align-items-md-end заставляет складной объект отображать элементы, выровненные снизу после точки останова md.
• .align-items-md-end на регистрацииКонтейнер / login и панель поиска заставляет их отображать их по правому краю после точки останова md, поскольку контейнер отображается в виде столбца.

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

Панель поиска, вход в систему и другие меню для мобильных устройств?

С предыдущим макетом, который я упоминал, вы можетеотображать столбец flex в обратном порядке в контейнере панели регистрации / входа в систему и поиска, а также в разборном виде для мобильных устройств.

Вы также можете изменить макет, чтобы он сначала работал таким же образом для мобильных устройств, а затем применить команду cus.классы Tom CSS, чтобы заставить их работать так, как вы хотите для больших экранов.Я думаю, это называется Прогрессивное продвижение ?

<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 на складной: переверните знак в контейнере и другие пункты меню на больших экранах
• .flex-md-column-reverse при входе в контейнер: переверните контейнер регистрации / входа и панель поиска на больших экранах

демо: https://jsfiddle.net/davidliang2008/rxzyh6oe/37/