Bootstrap с фиксированным раскрывающимся списком на панели навигации скрыт ⇐ CSS

[Anonymous]

У меня такая проблема при загрузке. Я сделал панель навигации, которая закреплена сверху, а раскрывающийся список работает на компьютере. Но когда я использую мобильное представление, раскрывающийся список не отображается. Я искал решение на этом и других сайтах, но ни один из них мне не помог. Кажется, проблема в overflow:auto; в мобильном представлении.

Вот мой код: http://www.bootply.com/tMdIqM9xSL

HTML:

Hjem Профиль

• Войти
• Мой профиль
• Добавить
• Избранное
• Выход

Статистика Свяжитесь с нами Поиск Тема  

 

 


CSS:

.maincontainer { отступ: 0 пикселей; } .mynav { нижняя граница: 1 пиксель сплошной RGB (38, 70, 83); цвет фона: #FFF; выравнивание текста: по левому краю; box-shadow: 0px 2px 2px #AAAAAA; z-индекс: 10; положение: фиксированное; ширина: 100%; } #spaceontop { поле внизу: 60 пикселей; } #m_showsearch {} a[title2]:hover:after { размер шрифта: 10 пикселей; шрифт: тонкий; граница: 1 пиксель, сплошная #000; цвет фона: RGB(38, 70, 83); содержимое: attr(title2); отступ: 10 пикселей; размер: 5 пикселей; цвет: #FFF; позиция: абсолютная; осталось: 50%; верх: 50 пикселей; } .выпадающее меню { радиус границы: 0 пикселей; граница: 1 пиксель, сплошной RGB (38, 70, 83); } .dropdown-menu li a:hover { цвет фона: #51b098; цвет: #fff; } .панель { коробка-тень: 3px 3px 3px 0px; граница: сплошная 1 пиксель #51b098; радиус границы: 0 пикселей; } .search-панель { радиус границы: 3 пикселя; коробка-тень: 0 пикселей 0 пикселей 0 пикселей 0 пикселей; } .search-panel.panel-heading { коробка-тень: 0 пикселей 0 пикселей 0 пикселей 0 пикселей; } .panel>.panel-heading { цвет фона: #FFF; /*#51b098;*/ //box-shadow: 0px 2px 2px 0px; радиус границы: 0 пикселей; размер шрифта: 100%; преобразование текста: верхний регистр; семейство шрифтов: «Lato», без засечек; } .panel>.panel-headinga { размер шрифта: 20 пикселей; начертание шрифта: жирный; цвет: #51b098; } .panel-body { // граница: 1 пиксель сплошной #51b098; } .btn-группа { вертикальное выравнивание: начальное; } .logo { размер шрифта: 20 пикселей; высота: 60 ​​пикселей; отступ: 18 пикселей; отступ слева: 20 пикселей; отступ справа: 20 пикселей; вертикальное выравнивание: по середине; border-top: 3px сплошной прозрачный; -webkit-transition: фон 0,2 с, цвет 0,2 с; -moz-transition: фон 0,2 с, цвет 0,2 с; -ms-transition: фон 0,2 с, цвет 0,2 с; -o-переход: фон 0,2 с, цвет 0,2 с; переход: фон 0,2 с, цвет 0,2 с; выравнивание текста: по центру; } .logo:hover { //цвет фона:rgb(38, 70, 83); оранжевый цвет; //текст-тень:-1px -1px #000; граница-верх: 3 пикселя сплошной RGB (38, 70, 83); -webkit-transition: фон 0,5 с, цвет 0,2 с; -moz-transition: фон 0,5с, цвет 0,2с; -ms-transition: фон 0,5 с, цвет 0,2 с; -o-переход: фон 0,5 с, цвет 0,2 с; переход: фон 0,5с, цвет 0,2с; } .логотип { размер шрифта: 12 пикселей; отступ: 14 пикселей 0 пикселей 14 пикселей 0 пикселей; поле: 5 пикселей; семейство шрифтов: Lato; преобразование текста: верхний регистр; отступ: 0 пикселей; } .кбн, .btn:наведите курсор, .btn:фокус { //цвет фона:rgb(38, 70, 83); отступ: 20 пикселей; //цвет:#FFF; отступ: 10 пикселей; радиус границы: 0 пикселей; граница: 0 пикселей; } .panel-default>.panel-heading { фон: прозрачный; } @media(максимальная ширина:1000 пикселей) { .логотип label:last-child { дисплей: нет; //видимость:скрыто; } .logo { высота: 100%; } } @media(максимальная ширина:768 пикселей) { .логотип { дисплей: нет; отступы: 20 пикселей 15 пикселей 15 пикселей 0 пикселей; } .logo { размер шрифта: 16 пикселей; отступ слева: 10 пикселей; отступ справа: 10 пикселей; отступ: 10 пикселей; } .div_headline { отступ: 5 пикселей; выравнивание текста: по центру; ширина: 100%; } .div_headline:после { дисплей: нет; } .floatnone { отступ: 0 пикселей; } #m_showsearch { отступ: 1 пиксель; } .mynav { ширина: 100%; поле внизу: 0 пикселей; максимальная высота: 100%; переполнение: авто; } .выпадающее меню { } } Как я уже сказал, я испробовал все решения, которые нашел, но ни одно из найденных мной не помогло.

РЕДАКТИРОВАТЬ: Мне нужно переполнение, чтобы кнопка поиска работала. Когда я нажимаю кнопку поиска, появляется div. И элемент поиска может быть большим, поэтому мне нужно иметь возможность его прокручивать.