WordPress Avada - Fusion Main Menu: как добиться центрированного позиционирования между горизонтальными пунктами верхнего уровня?
Пример тестового сайта: [1] http://test.hauptstadtventures.com/
Поскольку [1] является дочерней темой Avada Fusion [2] https://avada.theme-fusion.com/, одной из самых продаваемых тем, я надеюсь, что она актуальна и для других разработчиков.
У меня следующая проблема: Пункт меню 2 должен быть в центре между логотипом и соседним элементом 1. Та же логика должна применяться к пункту 3.
| [элемент 1] <-----------> [элемент 2] <-----------> [ЛОГОТИП] <----------- > [пункты 3] <-----------> [пункт 4]|
Это текущее состояние как есть. Элементы 2 и 3 не расположены по центру между логотипом и соседними элементами.
Ограничения:
- Главное меню на 100% (с отступом на основе пикселей слева от пункта 1 и справа от пункта 4).
- Логотип находится в центре окна / содержимого, что означает: он не перемещается так же, как центральный элемент [ОСНОВНЫЕ УСЛУГИ] в скрипке верхнего ответа [3] @Danield.
- Элементы 1 выровнены по левому краю, а элементы 4 - по правому краю.
- Элементы 2 и 3 плавают между логотипом и соседними элементами, всегда по центру, принимая во внимание длину текста привязки.
- Элементы 2 и 3 остаются в центре, когда ширина окна изменяется.
- Нет изменений в дереве HTML/DOM, нет решений для позиционирования javascript/jQuery, я ищу элегантное решение только для CSS, которое можно применить в [1]. Я знаю, что уже есть потенциально мешающие правила CSS, пожалуйста, рассмотрите это как часть проблемы.
Среда разработки:
- Версия Avada: 5.7.1
- Версия WP: 4.9.8
Я взглянул на следующие подходы, устал их реализовывать, но пока безуспешно:
Я также разработал решение jQuery, которое позиционирует левые значения CSS для элементов 2 и 3, но должно быть элегантное решение CSS. Правильно?
Заранее спасибо!