Navbar. Настройка

Структура контейнера navbar

Ниже показана возможная раскладка модулей по каждой позиции. В каждой позиции можно выводить ВСЕ указанные блоки, или некоторые, или никаких.

Блоки выделенные красным - это НЕ МОДУЛИ, их нет в списке модулей. Они встроены в шаблон. Они могут выводиться или нет, но не могут быть передвинуты в рамках позиции. Например кнопку мобильного меню нельзя переставить местами с Logo или модулем основного меню.

Структура позиции navbar-left

Структура позиции navbar-right

Структура позиции navbar-center

Если в настройках тип Logo - указано нет, то блок выводится не будет. Вы можете самостоятельно создать модуль и разместить его в другой позиции, при необходимости создать новую позицию. Вы можете изменить стуктуру navbar в файле  /blocks/navbar.php. Не забудьте сделать резервную копию файла перед внесением изменений.

Оформление лого  - user.css

Настройка меню

Если вы разместили модуль меню в одной из позиций navbar - left/right/center, в первую очередь переключите макет в модуле на navbar.

Пункты меню создаются и редактируются стандартно.
Добавить иконку можно во вкладке Тип ссылки - Css-класс ссылки (классы иконок можно посмотреть на сайте Uikit)

Многоколоночный режим

Если нужно выводить подпункты выпадающего меню в несколько колонок:

• Выбираем пункт меню с которого должна начинаться 2-я колонка
• Переходим в этот пункт
• Переходим во вкладку Тип ссылки - CSS-класс ссылки
• Задаем класс - nbcols
• Последующие пункты, включая выбранный, будут выводиться во 2-ой колонке
• Аналогично выбираем пункт для 3-й колонки, при необходимости.

Если есть возможность, я стараюсь первый пункт колонки выбирать Заголовок. Но это не обязательно. Можно выбрать любой тип пункта меню.

• Внимание. Выбранный пункт не должен быть пунктом следующего уровня!

Пример.

пункт меню
- подпункт 1
- подпункт 2
-- подпункт 2.1
- подпункт 3

• Не выбирайте пункт 2.1 в качестве первого пункта следующей колонки!

Вкладка шаблона. Navbar

Позиция 

Выше/ниже позиции Toolbar Выбираете на свое усмотрение, на скрине ниже - позиция ниже Toolbar.

Стиль

Их пока всего 2, со временем будет больше. На скрине ниже - стиль-1, стиль-2 на этом сайте.

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

Фон

Default / transparent. Если Default - цвет фона берется из настроек шаблона во вкладке Подробности (по умолчанию белый). Подбираете свой цвет, при необходимости.

Ширина

В начале странице приведена конструкция Navbar. Пояснения:

• uk-navbar-container - во всю ширину экрана, его используем для цветового оформления
• uk-container - задается величиной настройки Ширина. По умолчанию 1200px. Можно расширить, увеличив рабочее пространство для меню, логотипа и пр.
• uk-navbar - собственно сам навбар. Контейнер, ограничивающий контентную часть.

Прилипание, Отмена фиксации, Анимация, Эффект show-on-up

Дополнительных разъяснений не требуют. На странице есть короткие пояснения.

Кнопка мобильного меню

Позиция кнопки

Можно выбрать Left / Right / Left + Right. В последнем случае можно выводить 2 кнопки, слева и справа. Причем выбрав 2 кнопки, вы можете задать разное разрешение экрана при котором они будут появляться. Обратите внимание, когда мы выбираем разные позиции кнопки (слева/справа), одновременно меняется и заголовок следующего поля "разрешение".

Позиция кнопки меню - Right 

это значит что когда основное меню в навбаре свернется при указанном разрешении, кнопка мобильного меню появистя в позиции navbar-right.

Разрешение 

это как раз то разрешение, ниже которого кнопка появится.

Когда скрывать меню 

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

 Внимание! Чтобы кнопка мобильного меню появилась.
необходимо чтобы в соответствующей позиции offcanvas-Left или offcanvas-Right (зависит от позиции кнопки) - БЫЛИ МОДУЛИ!
Если позиция будет пустой - кнопка не появится.

Указатель выпадающего меню 

v-образная иконка рядом с родительским пунктом.