Меню для мобильных

lisichka17
10 Posts
lisichka17 posted this 16 March 2018

Здравствуйте,
На данный момент у меня стоит Themler версия PRO v.441
Работаю на локальном сервере.
Проблема следующая. Создаю тему и по задуманному дизайну, в мобильной версии шаблона иконка меню должна идти в ряд с остальными иконками. То есть, создана колонка с пятью ячейками с размерами: 25%; 16%; 16%; 16%; 16% в первой ячейке находится меню. Когда нажимаем иконку - выпадает меню (как и должно быть) Но проблема в том, что меню выпадает именно с размерами заданными для первой колонки, то есть 25% поэтому пункты меню не влезают. Определять размер в 100% - значит изменится отображение иконок, получится не в ряд. Думаю на картинке будет яснее:

скриншот

![enter image description here][2]

Есть ли возможность чтобы нажатие на иконку меню приводило к открытию меню на весь экран, без изменения ширины колонки, в которой находится иконка меню. И как это сделать? Спасибо

Здравствуйте, На данный момент у меня стоит Themler версия PRO v.441 Работаю на локальном сервере. Проблема следующая. Создаю тему и по задуманному дизайну, в мобильной версии шаблона иконка меню должна идти в ряд с остальными иконками. То есть, создана колонка с пятью ячейками с размерами: 25%; 16%; 16%; 16%; 16% в первой ячейке находится меню. Когда нажимаем иконку - выпадает меню (как и должно быть) Но проблема в том, что меню выпадает именно с размерами заданными для первой колонки, то есть 25% поэтому пункты меню не влезают. Определять размер в 100% - значит изменится отображение иконок, получится не в ряд. Думаю на картинке будет яснее: ![скриншот][1] ![enter image description here][2] Есть ли возможность чтобы нажатие на иконку меню приводило к открытию меню на весь экран, без изменения ширины колонки, в которой находится иконка меню. И как это сделать? Спасибо [1]: https://inmobi.pro/wp-content/uploads/2018/03/334.png

Last edited 16 March 2018 by lisichka17

Vote to pay developers attention to this features or issue.
11 Comments
Order By: Standard | Newest
Support Team
Support Team posted this 16 March 2018

Hi,

Это довольно сложно сделать, потому как выпадающая часть меню по ширине зависит от ширины того контейнера, в котором она лежит. В данном случае это колонка. Есть не очень красивый вариант насильного задания ширины для меню в режиме телефона. Например 100vw. Тогда, если есть ширина, меню вылезет за пределы ширины колонки. Тогда вам нужен будет еще такой css который можно добавить в Settings >> Additional CSS:

.navbar-collapse.collapse
{
overflow: visible;
}

Может сработать.

Thank you,
Olivia

Hi, Это довольно сложно сделать, потому как выпадающая часть меню по ширине зависит от ширины того контейнера, в котором она лежит. В данном случае это колонка. Есть не очень красивый вариант насильного задания ширины для меню в режиме телефона. Например 100vw. Тогда, если есть ширина, меню вылезет за пределы ширины колонки. Тогда вам нужен будет еще такой css который можно добавить в Settings >> Additional CSS: `.navbar-collapse.collapse { overflow: visible; }` Может сработать. Thank you, Olivia
lisichka17
10 Posts
lisichka17 posted this 17 March 2018

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

Спасибо, ваш способ помог. На будущее, хотелось бы чтобы было больше настроек для мобильного меню. Как мы с вами знаем, сейчас в первую очередь, и чаще всего, на сайты заходят сначала с мобильника, а уж потом с ноутбука или компьютера...
Support Team
Support Team posted this 18 March 2018

Hi,

Тут дело не в отсутствии настроек, а в возможностях css. У меню родитель по ширине ограничен. Так что выйти за его пределы при некоторых конфигурациях сложно и нужно жестко задавать ширину, т.е. процентная и автоматическая ширина всегда будет зависеть от ширины родителя.

Чтобы растянуть меню его нужно вытянуть из колонки.

Thank you,
Olivia

Hi, Тут дело не в отсутствии настроек, а в возможностях css. У меню родитель по ширине ограничен. Так что выйти за его пределы при некоторых конфигурациях сложно и нужно жестко задавать ширину, т.е. процентная и автоматическая ширина всегда будет зависеть от ширины родителя. Чтобы растянуть меню его нужно вытянуть из колонки. Thank you, Olivia
lisichka17
10 Posts
lisichka17 posted this 24 March 2018

Вопрос также про выпадающее меню в мобильной версии.
Когда иконка меню находится слева, подсказанный вами код:

.navbar-collapse.collapse { overflow: visible; }

Приводит к желаемому результату - то есть, меню расширяется на весь экран. (этот вопрос решен)

Но когда я определяю иконку меню в крайнюю правую колонку, то меню также расширяется, но
расширяется, естественно, в правую сторону и выходит за пределы экрана.

Есть ли решение в таком случае?
Чтобы по нажатию на иконку (которая будет находится справа) меню выходило на весь экран, без смещения в правую сторону.

Изменение параметров "отступ внутри" и "отступ снаружи" не спасают.

Вопрос также про выпадающее меню в мобильной версии. Когда иконка меню находится слева, подсказанный вами код: > .navbar-collapse.collapse { overflow: visible; } Приводит к желаемому результату - то есть, меню расширяется на весь экран. (этот вопрос решен) Но когда я определяю иконку меню в крайнюю правую колонку, то меню также расширяется, но расширяется, естественно, в правую сторону и выходит за пределы экрана. Есть ли решение в таком случае? Чтобы по нажатию на иконку (которая будет находится справа) меню выходило на весь экран, без смещения в правую сторону. Изменение параметров "отступ внутри" и "отступ снаружи" не спасают.
Support Team
Support Team posted this 24 March 2018

Hi,

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

Thank you,
Olivia

Hi, Выпадающее меню позиционируется относительно своего родителя. Т.е. оберток менюшки, которая кнопочка. Поэтому нужно будет делать доп. сдвиг в ширину экрана скорее всего. Нужно смотреть от текущего положения на конкретном примере. Thank you, Olivia
lisichka17
10 Posts
lisichka17 posted this 25 March 2018

Вот картинка, думаю станет понятнее чего хочется достичь

enter image description here

Вот картинка, думаю станет понятнее чего хочется достичь ![enter image description here][1] [1]: https://studioexpertlash.com/wp-content/uploads/2018/03/rrty.jpg
lisichka17
10 Posts
lisichka17 posted this 28 March 2018

Здравствуйте, что-то ответа от вас нет, мой вопрос еще актуален и я приложил объяснение-картинку выше (в предыдущем сообщении) Спасибо :)

Здравствуйте, что-то ответа от вас нет, мой вопрос еще актуален и я приложил объяснение-картинку выше (в предыдущем сообщении) Спасибо :)
Support Team
Support Team posted this 28 March 2018

Добрый день,

Нужно посмотреть тему, попробуйте как вариант такой код:

.navbar-collapse.collapse
{
margin-left:-66%;
}

Но лучше прикрепите тему с контентом и редактором.

Sincerely,
Hella

Добрый день, Нужно посмотреть тему, попробуйте как вариант такой код: .navbar-collapse.collapse { margin-left:-66%; } Но лучше прикрепите тему с контентом и редактором. Sincerely, Hella
lisichka17
10 Posts
lisichka17 posted this 28 March 2018

Ок, прилагаю тему с контентом

Ок, прилагаю тему с контентом
lisichka17
10 Posts
lisichka17 posted this 02 April 2018

Здравствуйте

... И снова я.
И снова не дождусь ответа :)
Я приложил тему вместе с контентом как вы просили...
А в ответ тишина...
?

Здравствуйте ... И снова я. И снова не дождусь ответа :) Я приложил тему вместе с контентом как вы просили... А в ответ тишина... ?
Support Team
Support Team posted this 05 April 2018

Добрый день,

Извините за задержку. Ответила в другом вашем кейсе по этой проблеме. Этот кейс закрываю.

Sincerely,
Hella

Добрый день, Извините за задержку. Ответила в другом вашем кейсе по этой проблеме. Этот кейс закрываю. Sincerely, Hella
You must log in or register to leave comments