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

 
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форума
Сообщений: 3056
Для уменьшения шапки, понадобилось сместить главное меню на уровень логотипа и здесь обнаружил в мобильных устройствах оно уже не работает. Точнее, не раскрывается вниз раздвигая границу шапки,
Не знаю, это глюк или так и должно быть.
Что обнаружил, смещаясь вверх (настройками CSS) главное меню попадает под влияние классов обслуживающих то место куда попадает меню. Хотя физически стоит на своем месте, в позиции Меню.
Мешает работе класс d-flex. В настройках позиции виджета главного меню его нет, но он есть в позиции группы виджетов Лого + меню пользователя
Теоретически можно исключить влияние класса d-flex на главное меню, но как это сделать так и не нашел.
Что подскажите?
По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках с реальной защитой! Дешевые домены здесь! Автоботы для соцсетей
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 2960
Скриншоты увеличили бы количество ответов.
Пока даже представить проблему не могу.

Можете почитать в документации https://bootstrap-4.ru/docs/4.1/utilities/flex/
И на пк сделать выравнивание flex по середине, а на трубе - по верху. И тогда ничего "скакать" не будет.
Виджеты, поля и компоненты для instantcms 2 www.zau4man.ru tm @zau4man
Реклама
cms
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форума
Сообщений: 3056
Zau4man:

Скриншоты увеличили бы количество ответов.
Пока даже представить проблему не могу.
Попытаюсь скриншотами.
По умолчанию поле главного Меню находится под Логтипом, в специальном месте сетки виджетов
При смещении главного меню, оно не работает на мобильных устройствах.
Я же хочу разместить Главное меню после Логотипа
При смещении главного меню, оно не работает на мобильных устройствах.
Для перемещения, с помощью Инстайлера получил код
Код PHP:
  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. }
Но после применения этого кода перестает работать Главное меню на мобильных устройствах. Можно посмотреть результат на тестовом сайте https://gradinfo.ru
Экспериментально нашел, что причина в классе d-flex из верхнего Ряда "Лого + меню пользователя" То есть, при смещении главного меню к логотипу, оно подпадает под действие настроек этого ряда.
При смещении главного меню, оно не работает на мобильных устройствах.
Почему это происходит мне не понятно.
Как и что надо сделать, чтобы при смещении Главного меню вверх к логотипу, меню оставалось функциональным и в мобильном варианте?
Редактировалось: 2 раз (Последний: 25 декабря 2020 в 20:41)
По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках с реальной защитой! Дешевые домены здесь! Автоботы для соцсетей
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 3415
vikont,
Что-то Вы страшное пытаетесь сделать.
Если случайно вызовете дьявола - просто перекреститесь.

Можно еще в настройках колонки, где меню, позицию вывода изменить с "в конце" на " в начале".
Но это, наверное, слишком просто...
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форума
Сообщений: 3056
Ris:

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

Можно еще в настройках колонки, где меню, позицию вывода изменить с "в конце" на " в начале".
Но это, наверное, слишком просто...
Вот просто так "как два пальца об асфальт" - не работает. Вы сами пробовали?
Без смещения меню, все работает, хоть вверху хоть внизу. А вот если сместить к Логотипу - НЕ работает.
Не работает даже если сделать 3 - колонки
1. -Логотип
2. - Меню
3. - Персональное меню
Потому, что виджет Меню подпадает под действие класса d-flax
По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках с реальной защитой! Дешевые домены здесь! Автоботы для соцсетей
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 3415
vikont,
Просто взял и кинул виджет главного меню в колонку к персональному:
Спойлер
Ничего больше не делал.

Если мешает ди-флекс - уберите его из классов контейнера ряда для ряда Лого + меню пользователя.
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форума
Сообщений: 3056
Ris:

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

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

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

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

Я разобрался со своей проблемой, но в итоге поставил шаблон Smart, хотя он несколько тормознутее Moderna а хотелось бы использовать Modernа. Modernу не хватает чисто мобильных фишек. Видел интересные и у Олега Васильевиа я. Если они оба поделятся наработками и вы согласитесь их встроить в Modern, Инстант только выиграет.
Просил Evanescence доработать Smart под новый шаблон, но он считает это не целесобразным. Возможно он прав, есть мощный Modern, но без мобильных фишек.
Редактировалось: 3 раз (Последний: 26 декабря 2020 в 02:10)
По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках с реальной защитой! Дешевые домены здесь! Автоботы для соцсетей
Посетитель
small user social cms
МедальКубок зрительских симпатийАвторитет форума
Сообщений: 1467
Если говорить о гавном мобильном меню
https://goodmade.ru/instantcms2/242-shablon-mobilnogo-menyu.html
Таким же образом можно подключить любое другое моб. меню, сделав отдельный шаблон меню. И просто привязать его к клику по кнопке.
Редактировалось: 2 раз (Последний: 26 декабря 2020 в 11:50)
Делаю сайты, дополнения, верстаю, исправляю. skype:gdvden
Посетитель
small user social cms
МедальПочетный донор проектаАвторитет форума
Сообщений: 3056
GoodMade:

Если говорить о гавном мобильном меню
https://goodmade.ru/instantcms2/242-shablon-mobilnogo-menyu.html
Таким же образом можно подключить любое другое моб. меню, сделав отдельный шаблон меню. И просто привязать его к клику по кнопке.
Спасибо, Денис, но речь шла не только о самом меню, а еще о некоторых фишках Для удобства пользования и улучшения поведенческого фактора. Работая с мобильного устройства, пользователь привыкает возможности напрямик кликнуть на вызов по телефону или через мессенджер и кнопочки должны быть под рукой и даже мотивировать к звонку или заказу.
По рефке 10% скидка на мощный и гибкий хостинг на NVMе дисках с реальной защитой! Дешевые домены здесь! Автоботы для соцсетей
Посетитель
small user social cms
МедальАвторитет форумаКубок зрительских симпатийПочетный донор проекта
Сообщений: 3415
vikont,
Ваша ошибка в том, что Вы пытаетесь с элементами flexbox работать методами css2. Отсюда результат.
Почитайте про флекс, почитайте про бутстрап:
https://html5book.ru/css3-flexbox/
https://bootstrap-4.ru/docs/4.0/utilities/flex/

Сделайте файл html, нарисуйте в нем квадратов и двигайте их, тренируйтесь. Можно бутстрап в этот файл подключить.
Даже никаких опенсерверов не нужно - оно в браузере работает.
В начало страницы
Предыдущая темаСледующая тема Перейти на форум:
Быстрый ответ
Чтобы писать на форуме, зарегистрируйтесь или авторизуйтесь.