Перейти к содержанию
qwadro

в мобильной версии сделать верхнее меню всегда на экране

Рекомендуемые сообщения

здравствуйте, добрые люди. 

подскажите, как сделать верхнее меню в мобильной версии сайта "прилипшим" к верху экрана

в цсс меняю position: relative

на position: fixed

панель "прилепает" и при прокрутке ее всегда видно,  но выпадающее меню (при нажатии на кнопку МЕНЮ) открывается там же - вверху самом сайта. т.е если листануть страницу вниз, нажать кнопку МЕНЮ - не видно выпадающего списка а он открылся в самом верху страницы. подскажите плз, что и где дописать? чтобы меню открывалось ниже кнопки, где бы она не была.

 

надеюсь поняли, о чем я.. сайт https://growmarket.org

огромное спасибо заранее всем помогающим)

001.jpg

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

У вас выпадающее меню не внутри блока #top, а после него. Соответственно, следующему блоку #nav_bg только с отступом в ширину верхнего блока

 txMmZMG.png

 

Я дописал так, и стало норм:

wQHZTcm.png

Изменено пользователем 447934

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

447934я прописал все что вы написали 

получилось

но теперь шапка в мобильной версии и в версии для ПК как бы за панелькой этой подрезалась. т.е панель сверху чуток съедает шапку. подскажите как поправить? скрин прикрепил)

 

 

258.jpg

Изменено пользователем qwadro

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

у header добавьте отступ высотой с шапку. Т.е. около 40рх (margin-top:40px)

а элементу #top {

top:0;

}

чтоб не съезжал

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

@qwadro я вам в личке дал уже 2 решения)))) но видимо... хм

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

а вот так если сделаю - норм?

header .container делаю 55 px вместо 15 и все норм. так можно оставить?

 

 header .container 

 

 

image.png

Изменено пользователем qwadro

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
16 минут назад, Pascha сказал:

@qwadro я вам в личке дал уже 2 решения)))) но видимо... хм

не увидел просто писем в личке..

да, сделал что вы подсказывали, большое спс. все вроде бы на местах.. 

header {margin-top: 40px}

#top {
 position: fixed;
 top: 0;
 margin:auto;
 width: 100%;

    background: #fafafa;
    border-bottom: 1px solid #e2e2e2;
    padding: 6px 0 1px;
    min-height: 40px;
    box-shadow: 0 0 3px #666666;
    z-index: 99999;
}

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

как ее точно прилепить, чтобы никаких закрываний?

на второстепенных стр сайта видно норм сдвиг этот при прокрутке.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

а еще вот такой косяк - при нажатии на МЕНЮ в этой прилишей панели при первом нажатии меню открывается и закрывается. при повторном - открывается норм (можно нажимать на подпункты)

 

чую, чем дальше в лес тем толще партизаны)) помогите плз, будьте добры!)

Изменено пользователем qwadro

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
14 минут назад, qwadro сказал:

а еще вот такой косяк - при нажатии на МЕНЮ в этой прилишей панели при первом нажатии меню открывается и закрывается. при повторном - открывается норм (можно нажимать на подпункты)

 

чую, чем дальше в лес тем толще партизаны)) помогите плз, будьте добры!)

это не косяк верстки, а жабаскрипта создателя шаблона...

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
22 минуты назад, qwadro сказал:

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

не вижу такого. В каком браузере? Можно скрин?

15 минут назад, qwadro сказал:

а еще вот такой косяк - при нажатии на МЕНЮ в этой прилишей панели при первом нажатии меню открывается и закрывается

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
13 часов назад, 447934 сказал:

не вижу такого. В каком браузере? Можно скрин?

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

с нескольких мобил просмотрено и на всех панелька чуть двигается туда-сюда при прокрутке страницы вверх-вниз

не знаю, как показать то.. видео чтоль снять)) 

 

уже написал разрабу, по счет скриптов. пока молчит.. 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

видео не прекрепляется сюда.. залил в сайт. https://growmarket.org/vid1.zip - там видно и нажатие кнопки как себя ведет и что панелька скачет.

п.с. в браузере стоит плагин от антивиря какого то, проверяющий загрузки и загружаемые файлы. сделал видео. завернул его в zip архив, залил в корень сайта, пробнул скачать - этот плагин почему то ругается. заверяю всех, что ничего туда не напихал, клятвенно!!!! ))) все качается но плагин говорит "вы рискуете" 

Изменено пользователем qwadro

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Похожий контент

    • От Pascha
      300.00 руб
      Скачать/Купить дополнение


      Боковое меню для мобильной версии сайта
      MMenu – это адаптивное многоуровневое меню для любого сайта.
      Вы сможете создать на своем сайте не только удобное, но и понятное меню, рассчитанное для всех устройств
      Реализовано на основе jquery.mmenu.js и адаптировано для ОС
      На данный момент реализован вывод категорий/подкатегорий, при необходимости можно добавить и другие пункты.
      Может применяться не только для мобильной версии, но и для "супердлинных" списков категорий
      Используется ocmod.  Установка через менеджер дополнений - стандартно.
      демо на дефолте (только для мобильных девайсов) - появляется при разрешении менее 991px)
      реальный магазин (отображение как для мобильных, так и десктоп)

      *тестировалось на дефолте, для шаблонов возможны мелкие правки и адаптация
       
      Добавил Pascha Добавлено 19.02.2018 Категория Меню, дизайн, внешний вид Системные требования Сайт разработчика https://paschaopencart.ru/ Старая цена Метод активации Без активации Ioncube Loader Нет OpenCart 2.3
      2.1 ocStore 2.3
      2.1 OpenCart.Pro, ocShop  
    • От Pascha
      MMenu – это адаптивное многоуровневое меню для любого сайта.
      Вы сможете создать на своем сайте не только удобное, но и понятное меню, рассчитанное для всех устройств
      Реализовано на основе jquery.mmenu.js и адаптировано для ОС
      На данный момент реализован вывод категорий/подкатегорий, при необходимости можно добавить и другие пункты.
      Может применяться не только для мобильной версии, но и для "супердлинных" списков категорий
      Используется ocmod.  Установка через менеджер дополнений - стандартно.
      демо на дефолте (только для мобильных девайсов) - появляется при разрешении менее 991px)
      реальный магазин (отображение как для мобильных, так и десктоп)

      *тестировалось на дефолте, для шаблонов возможны мелкие правки и адаптация
       
    • От cloudrc
      Скачать/Купить дополнение


      Переход на полную версию - Bootstrap Full Version
      Дополнение позволяет пользователям с мобильных телефонов/планшетов просматривать десктопную версию сайта.
      Корректно работает с большинством шаблонов на Bootstrap.
      Работает на OCMOD.
       
      Установка:
      Через раздел "Дополнения" -> "Установка дополнений(расширений)" загрузить файл bootstrapfull.ocmod.xml В разделе "Дополнения" -> "Менеджер дополнений" обновить кэш модификаторов В разделе "Система" -> "Настройки" ввести первую контрольную точку "media" для ".container" (по-умолчанию - 1200)  
      Поддержка:
      Техническая поддержка осуществляется в ветке поддержки. Дополнение распространяется "как есть", поддержка при наличии свободного времени(на услуги не распространяется). Добавил cloudrc Добавлено 30.10.2017 Категория Меню, дизайн, внешний вид Системные требования Сайт разработчика Старая цена Метод активации Без активации Ioncube Loader Нет OpenCart 2.3
      2.2
      2.1
      2.0 ocStore 2.3
      2.2
      2.1 OpenCart.Pro, ocShop Не проверялось  
    • От Techno1og
      Уважаемые специалисты! Требуется доработать действующий магазин на Opencart 1.5.5:
       
      1. Добавить Https протокол (SSL ключ получен) . Прописать редиректы на новую версию.
      2. Добавить кроссбраузерную мобильную версию сайта, оптимизировать под стандарту.
      3. Обновить установленные модули отзывов, новостей, оплаты, доставки (магазин давно не обновлялся).
      4. Исправить внутренние ошибки сайта в css и javascript. Отредактировать robots.txt \ sitemap.xml
      5. Настроить 301 редирект на неработающие страницы. Определить все битые бэклинки.
      6. Оптимизация загрузки страниц сайта.
      7. Дать рекомендации для дальнейшего развития магазина.
       
      Интересует долгосрочное сотрудничество.
      Ссылку на сайт предоставим в л.с.
       
      Успехов.
    • От Denis01
      Добрый день!
      Необходимо создать адаптивную верстку для мобильных устройств.
      Интересует вводная цена и сроки.
      Сайт niva21.com.ua
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.