Как сделать полную кастомизацию верхней полоски сайта (customHeader)

Разметка верхней полоски задается в GetLayout SELECT 1 в параметре CustomHeader.

В разметку можно вставлять дополнительно переменные, которые при рендеринге страницы будут заменяться на следующие элементы: 

  • {mainLogo} - лого и название сайта 
  • {topSidebarToggleButton} - кнопка сворачивания мобильного меню
  • {breadcrumb} - хлебные крошки
  • {menuHorizontal} - горизонтальное меню
  • {fastAddForms} - меню быстрых действий
  • {search} - поиск
  • {seachMobile} - поиск под мобильный
  • {alerts} - иконка меню уведомлений
  • {messages} - иконка сообщений
  • {divider} - вертикальный разделитель в элементах 
  • {balance} - состояние баланса
  • {cart} - корзина 
  • {lang} - переключение языков
  • {user} - меню пользователя

Разметку для CustomHeader указывать лучше не прямо в GetLayout, а генерировать через HTML блок. 

CustomHeader не влияет на левую колонку меню (логотип принадлежит именно левой колонке, а не верхней полоске). Если необходимо его скрыть, то используйте либо CSS либо HideLeftCol (если не нужна вся колонка). 

Есть параметры topMakeup и topMakeupMobile в GetLayout. Они отличаются от CustomHeader тем, что задают только разметку внутри списка иконок после поиска (и позволяют настроить разную верстку для мобильного и настольного вида).

  

Пример кастомизации панели на демостенде  - https://demo.web-automation.ru/list/watch/kastom-verkhney-paneli-sayta---85

Обновление Апрель 2023. Мы создали отдельный сниппет, который позволит использовать верхнюю полоску как на лендах, так и на стандартных страницах. 

Как он выглядит по умолчанию на ПК версии: 

Примечани: чтобы сделать светлым заголовок надо поменять всего лишь 2 класса с dark на light (navbar-dark и bg-dark).

Как выглядит по умолчанию на мобиальной версии в раскрытом виде: 

В данном случае менять разметку можно практически любую. 

Сам текст html блока (его можно использовать в customHeader): 

<div style="height: 55px;">
  <div class="navbar-container position-fixed bg-dark w-100" style="z-index:2;">
    <nav class="navbar navbar-expand-md navbar-dark">
      <!-- ЛОГО и НАЗВАНИЕ -->
      <a class="navbar-img mr-2" href="/"><i class="fas fa-dove "></i>
      </a>
      <a class="navbar-brand" href="#">Falcon Space</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbar">
        <!-- МЕНЮ СЛЕВА -->
        <ul class="navbar-nav mr-auto">
          <!-- Простые пункты меню -->
          <li class="nav-item">
            <a class="nav-link" href="#lnd-main3">Ссылка 1</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#link-2">Ссылка 2</a>
          </li>
          <!-- Вложенные пункты меню -->
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Dropdown
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
		  <!-- Глобальный поиск -->
          <li class="nav-item">
            <div class="input-group" style="max-width: 150px; position:relative; top: 2px;">
              <select class="form-control  bg-light border-0 small asSearch as-select-search d-none" data-url="/controls/search/search" data-itemid="0">
                <option value="0">Найти...</option>
              </select>
            </div>
          </li>
          <!-- УВЕДОМЛЕНИЯ -->
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle " href="#" id="alertsDropdown" role="button" data-toggle="dropdown">
              <i class="fas fa-bell fa-fw"></i>
              <span class="badge badge-danger badge-counter as-notification-count hide">0</span>
            </a>
            <div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated zoomInDown animated--grow-in" aria-labelledby="alertsDropdown">
              <a href="/notifications" class="dropdown-header text-center text-decoration-none">
                Все уведомления
              </a>
              <div class="as-notification-cont"></div>
            </div>
          </li>
          <!-- Сообщения -->
          <li class="nav-item dropdown no-arrow mx-1">
            <a class="nav-link " href="/messages" id="msgCount" role="button">
              <i class="fas fa-envelope fa-fw "></i>
              <span class="badge badge-danger badge-counter as-msg-count hide">0</span>
            </a>
          </li>
		  <!-- РАЗДЕЛИТЕЛЬ -->
          <li class="border d-none d-sm-block"></li>
		  <!-- Некая кнопка с иконкой -->
          <li class="nav-item dropdown no-arrow mx-1" title="">
            <a class="nav-link " href="#" role="button">
              <i class="fa fa-bars fa-fw"></i>
              <span>1000</span>
            </a>
          </li>
		  <!-- КОРЗИНА -->
          <li class="nav-item dropdown no-arrow asTopCartBar">
            <a class="nav-link dropdown-toggle" href="#" id="cartDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="fas fa-shopping-cart fa-fw"></i>
              <span class="badge badge-danger badge-counter as-cart-productCount hide">0</span>
            </a>
            <div class="dropdown-menu dropdown-menu-right p-3 shadow animated--grow-in text-center" aria-labelledby="cartDropdown">
              <div class="as-cart-info" data-code="supplierProduct"></div>
            </div>
          </li>
          <!-- ЯЗЫКИ -->
          <li class="nav-item dropdown no-arrow asTopLang">
            <a class="nav-link dropdown-toggle" href="#" id="langDropdown" role="button" data-toggle="dropdown">
              <i class="fas fa-globe fa-fw"></i><span class="as-langs-curLang hide text-uppercase"></span>
            </a>
            <div class="dropdown-menu dropdown-menu-right p-3 shadow text-center" aria-labelledby="langDropdown">
              <div class="as-langs hide"></div>
            </div>
          </li>
        </ul>
         <!-- МЕНЮ СПРАВА -->
        <ul class="navbar-nav">
          <li class="nav-item ">
            <a class="nav-link" href="https://wa.me/+79008007060" title="Whatsapp, telegram, viber" target="_blank"><i class="fab fa-whatsapp"></i> +7 (900) 800-70-60</a>
          </li>
          <!-- СЛУЖЕБНОЕ МЕНЮ ПОЛЬЗОВАТЕЛЯ -->
          <li class="nav-item dropdown no-arrow as-loginStatus">
            <a class="nav-link dropdown-toggle animated zoomInRight delay-1s slow" href="#" id="userDropdown" role="button" data-toggle="dropdown">
              <i class="fa fa-user-tie"></i>
              <span class="as-userPicLabel ">user1</span>
            </a>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
              <span class="userDropdownLabel dropdown-item disabled text-center font-weight-bold">
                Пользователь
              </span>
              <div class="dropdown-divider"></div>
              <a class="dropdown-item " href="/user">
                <i class="fas fa-user fa-sm fa-fw mr-2 text-gray-400"></i>
                Мой профиль
              </a>
              <a class="dropdown-item " href="/changepass">
                <i class="fas fa-key fa-sm fa-fw mr-2 text-gray-400"></i>
                Сменить пароль
              </a>
              <a class="dropdown-item " href="/account/logoff">
                <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                Выйти
              </a>
            </div>
          </li>

        </ul>
      </div>
    </nav>
  </div>
</div>

Falcon Space - функциональная веб-платформа разработки на узком стеке MS SQL/Bootstrap. Вводная по Falcon Space
Насколько полезной была статья?

Google поиск по нашей документации

Falcon Space

Это снижение стоимости владения

за счет меньшего количества людей для поддержки и узкого стека разработки. Про снижение стоимости владения продуктом

Это быстрое внесение изменений

по ходу эксплуатации программы. Как создается функционал на платформе

Это простой удобный интерфейс

адаптация под мобильные устройства. Про юзабилити платформы

Нужна бесплатная консультация?
Получить оценку проекта
Создайте концепцию проекта на основе нашего шаблона и получите оценку проекта в виде КП.
Демо-сайт решений
Базисные решения, которые можно гибко адаптировать под себя: менять внешний вид, бизнес-логику и даже структуру базы данных.