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

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

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

Bootstrap 4: Navbar с логотипом и 2 строкамиBootstrap 4 навигационная панель с 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 панели навигации, которые показаны в разделе изображений «Что я хотел».

Стоит ли изучать PHP в 2026-2027 годах?
Стоит ли изучать PHP в 2026-2027 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
0
0
451
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

Похоже, что панель регистрации/входа всегда будет поверх панели поиска. Следовательно, контейнер, который их содержит, может быть 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 в контейнере подписки/входа и панели поиска принудительно отображает их с выравниванием по правому краю после точки останова md, потому что контейнер отображается в виде столбца.

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


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

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

Вы также можете изменить макет, чтобы он работал таким образом сначала для мобильных устройств, а затем применить пользовательские классы 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/

Возможно ли переупорядочить меню для мобильных устройств (например, переместить панель поиска вверх, войти во второе и другие меню?)

PanK 20.06.2019 18:41

Другие вопросы по теме