Вот что я хотел на панели навигации 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 панели навигации, которые показаны в разделе изображений «Что я хотел».





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