Адаптивный дизайн помогите разобраться с меню

А что в нем разбираться. Весь сайт просто на коленях умоляет о редизайне. Вот с этого и начните, а за одно и менюху сделаете нормальной

а если быстро, то через медиа запрос при screen <= 480 уберите с .col1 float:left

У меня такого нет в css (((

А в рамках существующего дизайна?

А если найду (с).

style.css строка номер 8

http://easycaptures.com/fs/uploaded/909/9497982771.png

соответственно, чтоб запретить обтекание делаете так

@media screen and (max-width: 480px) {

/* css-стили */;

.col1{float:none;}

}

и пихаете в самый низ стилевого файла

На самом деле, там вообще свалка какая-то. Типо равноправие для рекламных блоков и пунктов меню. Так не делается.

@media screen and (max-width: 480px) {

/* css-стили */;

.col1{float:none;}

}

ага , сделал для @media(min-width: 320px) and (max-width: 960px) теперь меню на всю ширину как надо пои этих расширениях. и реклама не перекрывает.

Но меню все равно под низ залазит и его видно. Осталось только эту проблему решить. Посмотрите плиз.

ulit77,

эмммм... а вы хотите, чтоб оно после этого еще и работало нормально?

---------- Добавлено 09.01.2017 в 16:50 ----------

Тыкалку поставьте через position:fixed;

Менюху, если хотите, чтобы она выезжала через верх, расположите с margin-top: минус много. Заведомо больше, чем она будет. (-2000px например);

потом по клику просто уменьшайте маржин до нуля

Извините за назойливость. Но не совсем поняль что убрать а что поставить. Вы можете пожалуйста прямо на примере моего кода эти куски написать.

Спасибо заранее.

1 должно быть

.c2-1 {
    margin-top: -2000px;
    transition: all 1s ease-out 0.5s;
}

2.должно быть

.col1 {
    background-color: white;
    border-color: #999;
    border-style: solid;
    border-width: 1px;
    float: left;
    position: relative;
    text-align: center;
    z-index: 2000;
}

3 должно быть

.header {
    background-color: white;
    margin-top: 65px;
    position: relative;
    text-align: center;
    width: 100%;
}

4.должно быть

.c2-1.active {
    margin-top: -130px;
}

5

.menu-mini {
    background-color: white;
    display: block;
    height: 65px;
    left: 0;
    position: fixed;
    text-align: left;
    top: 0;
    width: 100%;
}

.c2-1 {
    margin-top: -2000px;
    transition: all 1s ease-out 0.5s;
}

.col1 {
    background-color: white;
    border-color: #999;
    border-style: solid;
    border-width: 1px;
    float: left;
    position: relative;
    text-align: center;
    z-index: 2000;
}

.header {
    background-color: white;
    margin-top: 65px;
    position: relative;
    text-align: center;
    width: 100%;
}

.c2-1.active {
    margin-top: -130px;
}

.menu-mini {
    background-color: white;
    display: block;
    height: 65px;
    left: 0;
    position: fixed;
    text-align: left;
    top: 0;
    width: 100%;
}

Отлично. Спасибо большое. То что надо.