При смещении главного меню, оно не работает на мобильных устройствах.

InstantCMS 2.X
#1 25 декабря 2020 в 00:26
Для уменьшения шапки, понадобилось сместить главное меню на уровень логотипа и здесь обнаружил в мобильных устройствах оно уже не работает. Точнее, не раскрывается вниз раздвигая границу шапки,
Не знаю, это глюк или так и должно быть.
Что обнаружил, смещаясь вверх (настройками CSS) главное меню попадает под влияние классов обслуживающих то место куда попадает меню. Хотя физически стоит на своем месте, в позиции Меню.
Мешает работе класс d-flex. В настройках позиции виджета главного меню его нет, но он есть в позиции группы виджетов Лого + меню пользователя
Теоретически можно исключить влияние класса d-flex на главное меню, но как это сделать так и не нашел.
Что подскажите?
#2 25 декабря 2020 в 09:31
Скриншоты увеличили бы количество ответов.
Пока даже представить проблему не могу.

Можете почитать в документации bootstrap-4.ru/docs/4.1/utilities/flex/
И на пк сделать выравнивание flex по середине, а на трубе — по верху. И тогда ничего "скакать" не будет.
#3 25 декабря 2020 в 20:38


Скриншоты увеличили бы количество ответов.
Пока даже представить проблему не могу.

Zau4man
Попытаюсь скриншотами.
По умолчанию поле главного Меню находится под Логтипом, в специальном месте сетки виджетов

Я же хочу разместить Главное меню после Логотипа

Для перемещения, с помощью Инстайлера получил код
  1. .navbar-nav{
  2. font-size:18px ;
  3. height:23px ;
  4. font-weight:bold ;
  5. margin-top:-70px ;
  6. padding-left: 180px;
  7.  
  8.  
  9. }
Но после применения этого кода перестает работать Главное меню на мобильных устройствах. Можно посмотреть результат на тестовом сайте gradinfo.ru
Экспериментально нашел, что причина в классе d-flex из верхнего Ряда "Лого + меню пользователя" То есть, при смещении главного меню к логотипу, оно подпадает под действие настроек этого ряда.

Почему это происходит мне не понятно.
Как и что надо сделать, чтобы при смещении Главного меню вверх к логотипу, меню оставалось функциональным и в мобильном варианте?
#4 25 декабря 2020 в 20:50
vikont,
Что-то Вы страшное пытаетесь сделать.
Если случайно вызовете дьявола — просто перекреститесь.

Можно еще в настройках колонки, где меню, позицию вывода изменить с "в конце" на " в начале".
Но это, наверное, слишком просто…
#5 25 декабря 2020 в 21:25


vikont,
Что-то Вы страшное пытаетесь сделать.
Если случайно вызовете дьявола — просто перекреститесь.

Можно еще в настройках колонки, где меню, позицию вывода изменить с "в конце" на " в начале".
Но это, наверное, слишком просто...

Ris
Вот просто так "как два пальца об асфальт" — не работает. Вы сами пробовали?
Без смещения меню, все работает, хоть вверху хоть внизу. А вот если сместить к Логотипу — НЕ работает.
Не работает даже если сделать 3 — колонки
1. -Логотип
2. — Меню
3. — Персональное меню
Потому, что виджет Меню подпадает под действие класса d-flax
#6 25 декабря 2020 в 21:37
vikont,
Просто взял и кинул виджет главного меню в колонку к персональному:

Ничего больше не делал.

Если мешает ди-флекс — уберите его из классов контейнера ряда для ряда Лого + меню пользователя.
#7 26 декабря 2020 в 01:45


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

Если мешает ди-флекс — уберите его из классов контейнера ряда для ряда Лого + меню пользователя.

Ris
Спасибо. Чуть чуть не так, но сделал. У меня над меню, в шапке, еще один виджет с контактами. А с ним так как у вас никак не клеилось....
Под виджетом Логотипа вставил виджет с Контактами и под ним виджет с Меню — так все встало как положено и легко управлялось настройками позиционирования CSS.
Одно странно, почему у меня сразу так не получилось, ведь пробовал..

ПС. Это

Если мешает ди-флекс — уберите его из классов контейнера ряда для ряда Лого + меню пользователя.

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

ПС (Для Fuze) — Очень уж чувствительно Мобильное меню к положению главного меню в декстопе! Отображение обоих меню слишком привязано друг с другом и в итоге Мобильное меню получается не юзабельным. В этом отношении мобильное меню шаблона Smart от Evanescence более дружественное к пользователю и удобнее. На сегодняшний день, идет резкий рост пользователей с мобильными устройствами и нам это приходится учитывать.

Я разобрался со своей проблемой, но в итоге поставил шаблон Smart, хотя он несколько тормознутее Moderna а хотелось бы использовать Modernа. Modernу не хватает чисто мобильных фишек. Видел интересные и у Олега Васильевиа я. Если они оба поделятся наработками и вы согласитесь их встроить в Modern, Инстант только выиграет.
Просил Evanescence доработать Smart под новый шаблон, но он считает это не целесобразным. Возможно он прав, есть мощный Modern, но без мобильных фишек.
#8 26 декабря 2020 в 11:39
Если говорить о гавном мобильном меню
goodmade.ru/instantcms2/242-shablon-mobilnogo-menyu.html
Таким же образом можно подключить любое другое моб. меню, сделав отдельный шаблон меню. И просто привязать его к клику по кнопке.
#9 27 декабря 2020 в 00:00


Если говорить о гавном мобильном меню
goodmade.ru/instantcms2/242-shablon-mobilnogo-menyu.html
Таким же образом можно подключить любое другое моб. меню, сделав отдельный шаблон меню. И просто привязать его к клику по кнопке.

GoodMade
Спасибо, Денис, но речь шла не только о самом меню, а еще о некоторых фишках Для удобства пользования и улучшения поведенческого фактора. Работая с мобильного устройства, пользователь привыкает возможности напрямик кликнуть на вызов по телефону или через мессенджер и кнопочки должны быть под рукой и даже мотивировать к звонку или заказу.
#10 27 декабря 2020 в 02:03
vikont,
Ваша ошибка в том, что Вы пытаетесь с элементами flexbox работать методами css2. Отсюда результат.
Почитайте про флекс, почитайте про бутстрап:
html5book.ru/css3-flexbox/
bootstrap-4.ru/docs/4.0/utilities/flex/

Сделайте файл html, нарисуйте в нем квадратов и двигайте их, тренируйтесь. Можно бутстрап в этот файл подключить.
Даже никаких опенсерверов не нужно — оно в браузере работает.
Вы не можете отвечать в этой теме.
Войдите или зарегистрируйтесь, чтобы писать на форуме.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.