Доработка навигационного меню

Материал

Для модуля Заведение ПРО сайт ресторана. Различные готовые решения для доработки навигационного меню.

Перенести кнопку открытия мобильного меню влево - необходимо перенести код кнопки из шаблона компонента меню navbar в include/header/navbar.php до включаемой области с логотипом:

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#grain_bs_navbar_collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>

Фрагмент

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

body > .navbar {
    .cart {
        @include media-breakpoint-up(lg) {
            order: 10; // move cart at end of navbar, but leave at the top when mobile menu is opened
        }
    }
}
// код внутри if($arResult["DISPLAY_CART"]): в шаблоне компонента меню navbar перенести в начало

Фрагмент

Сделать, чтобы навигационное меню прилипало вверху экрана только на мобильных (по умолчанию - прилипает всегда):

body > .navbar {
    @include media-breakpoint-up(lg) {
        position: relative !important; // do not use fixed navbar at large screens
    }
}
// в файле include/footer/before.php заменить " pt-5" на " pt-5 pt-lg-0"

Фрагмент

Убрать прозрачность навигационного меню:

body > .navbar {
    &.navbar-dark {
        background-color: $header-bg;
    }
}