Как навести порядок в выпадающем меню мобильной версии?

Question

[Андрей Филимонов]

Здравствуйте,
помогите пожалуйста навести порядок с выпадающим меню в мобильной версии.Сайт на WP, коды меню и слайдеров копировал и в десктопной версии всё хорошо, с мобильной не получается:
1. Почему возникает билеберда с мобильным меню на главной странице, а на других страницах нет, если стили одни и те же?
Вот :

если на главной открыть меню, то оно развернётся на весь экран, и залезет на лого. "Услуги" начинаются с отступа. На обычной странице нет такого: высота задана 400 px, тут сделал ширину 80% для теста, можно прокрутить, "Услуги" без отступа, но футер налезает на меню. Повставлял overflow:scroll; в причастных классах, поменял z-index, но всё равно. как сделать на главной странице вариант как на обычной, но чтобы футер не налезал?

Вообще, как сделать покрасивее и поприятнее?

Answer 1

[owl-cat]

@media only screen and (max-width: 659px)
    men ul {
        float: none;
        clear: both; // add
    }
    #tmenu men a {
        color: #fff;
        padding: 8px;
        border-radius: 0; //add
    }

    men {
        padding: 10px;
        display: inline-block;
    }
}

Для главной страницы где тег men через js (или как там у вас) нужно поставить inline-block а не inline и все.

Comments

[Андрей Филимонов]

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

[owl-cat]

Удали все что перекривает изначальное значение display: none; На 1222 строчке в styleю "display: inline-block".

[Андрей Филимонов]

owl-cat:
Имеете в виду:

@media only screen and (max-width: 659px) {
 men{display: none; width:80%;clear:both;float:none;max-height:400px; overflow: auto;}
...
men{padding: 10px; display: inline-block; }
}

убрать display: inline-block, то меню займёт весь экран и нельзя будет прокрутить:


если поставить в первом случае display: none !important, то меню совсем не открывается?