CSS media queries — Как избавиться от перестраивания меню во время загрузки страницы на мобильных устройствах?

Question

[Сергей Dydaevskiy]

Здравствуйте.
Имеется сайт на WordPress, моя задача сделать для него адаптивную тему для чего был сверстан шаблон, и прописаны все media queries стили. Суть проблемы заключается в отображении меню на мобильных устройствах, дело в том что при загрузке страницы, в начале появляется сжатая версия полноценного меню, за тем это меню исчезает и появляется панель для вызова меню для мобильных устройств. Что необходимо исправить что бы сразу появлялась панель для мобильных устройств?
Вот ссылка на тестовый домен: testkomok-lawsumdutest.rhcloud.com
Баг можно увидеть в FireFox изменив ширину браузера до самого маленького размера.

Answer 1

[Пётр Попов]

При загрузке страницы на мобильном, меню по умолчанию не скрыто. Через несколько секунд, видимо, скрывается с помощью javascript и выводится меню для мобильных. Попробуйте в css жестко прописать display: hidden; и менять на display: visible; для широких экранов.

Comments

[Сергей Dydaevskiy]

Спасибо, пробую

[Сергей Dydaevskiy]

Спасибо помогло, прописал идентификатору меню
#menu-glavnaya-rus-verh {
display: none !important;}
И все заработало.

Столкнулся с другой траблой. В мобильном окне все элементы страницы перестраиваются в мобильный вид. Я так понимаю нужно копать в сторону ответа Алексея. Но даже при установке стилей прям в хеадер через эффекта не добился. На сайте установлен BootStrap v3. Буду очень благодарен Вам за подсказку.

[Сергей Dydaevskiy]

*через < style > < / style>*

[Пётр Попов]

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

Answer 2

[Алексей]

У вас основные стили находятся непосредственно в index.php соотевтвенно они загружаются первые вместе со страницей. Собственно в этом и проблема. Совет выше не поможет. Медиа запросы для меню засуньте в основные стили и все будет хорошо.

Comments

[Сергей Dydaevskiy]

Спасибо, но после перемещения стилей в самый верх по приоритетности вопрос не решился.

Answer 3

[Сергей Dydaevskiy]

Друзья, глянте пожалуйста сайт при полном разрешении экрана. Меню здесь тоже "дергается".