Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up

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


Recommended Posts

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

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

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

на position: fixed

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

 

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

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

001.jpg

Link to post
Share on other sites

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

 txMmZMG.png

 

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

wQHZTcm.png

Edited by 447934
Link to post
Share on other sites

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

получилось

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

 

 

258.jpg

Edited by qwadro
Link to post
Share on other sites

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

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

top:0;

}

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

Link to post
Share on other sites

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

Link to post
Share on other sites

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

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

 

 header .container 

 

 

image.png

Edited by qwadro
Link to post
Share on other sites

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;
}
Link to post
Share on other sites

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

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

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

Link to post
Share on other sites

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

 

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

Edited by qwadro
Link to post
Share on other sites

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

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

 

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

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

Link to post
Share on other sites

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

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

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

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

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

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

Link to post
Share on other sites

13 часов назад, 447934 сказал:

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

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

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

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

 

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

Link to post
Share on other sites

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

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

Edited by qwadro
Link to post
Share on other sites

  • 2 years later...

Всем привет. У меня на мобильной версии панель Категории в карточке товара, при открытии картинки, отображается поверх картинки. Как можно сделать чтобы картинка была на переднем плане и закрывала панель навигации?

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Similar Content

    • By cloudrc
      Скачать/Купить дополнение Переход на полную версию - Bootstrap Full Version
      Дополнение позволяет пользователям с мобильных телефонов/планшетов просматривать десктопную версию сайта.
      Корректно работает с большинством шаблонов на Bootstrap.
      Работает на OCMOD.
       
      Установка:
      Через раздел "Дополнения" -> "Установка дополнений(расширений)" загрузить файл bootstrapfull.ocmod.xml В разделе "Дополнения" -> "Менеджер дополнений" обновить кэш модификаторов В разделе "Система" -> "Настройки" ввести первую контрольную точку "media" для ".container" (по-умолчанию - 1200)  
      Поддержка:
      Техническая поддержка осуществляется в ветке поддержки. Дополнение распространяется "как есть", поддержка при наличии свободного времени(на услуги не распространяется).  
      Возможно, Вам будет полезен модуль для работы с YouTube видео:
      CLD YouTube Data API v3
      Добавил 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 Не проверялось Обращение к серверу разработчика Нет Старая цена  
    • By VIKA1991
      Доброго вечера! Знающие подскажите пожалуйста! Сайт https://stalzamki.ru/
      Баннеры в модуле HTML на мобильной версии съезжают куда-то далеко вправо. Как поправить? 

       
       
       
      И еще вопрос касаемо мобильной версии: как поправить шапку? уменьшить логотип, надпись "звоните прямо сейчас" и кнопки соцсетей сдвинуть в центр?

    • By colaweb
      12 999.00 руб
      Скачать/Купить дополнение


      Мобильное приложение из сайта или магазина
      Используйте момент чтобы обойти конкурентов.
       
      ПРЕИМУЩЕСТВА
       
      При помощи данного модуля создается полностью рабочее приложение для сайта или магазина как будто вы его загрузили из Google Play или Microsoft Store.
      Это приложение может работать без подключения к интернету.

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

      По заявлению Google, перед специалистами Lancôme стояла задача создать быстро загружаемый, мощный мобильный инструмент, который можно будет быстро найти и просто использовать. В результате в 2016 году у компании появилось веб-приложение.
      И что же в итоге? Результаты говорят сами за себя: на 84% снизилось время загрузки, на 17% увеличилась конверсия, на 53% увеличилось количество мобильных сеансов на iOS,18% push-уведомлений открываются пользователями, 8% потребителей, которые открыли push-уведомление, совершали покупку.
      Пример компании Lancôme стал показательным для всех, кто сомневался.

      Второй плюс — это то что при обновлении приложения созданного при помощи модуля, не требуется повторная установка. То есть у пользователей вашего сайта будут всегда актуальные данные.

      Третий плюс, страницы вашего сайта в интернете будут загружаться очень быстро. Что в свою очередь положительно повлияет на выдаче Google и Яндекс.
       
      Четвертый плюс. По данным Leanplum, мобильные уведомления побуждают в 9,6 раз больше пользователей совершать покупки в приложениях. К тому же клиенты, которые получают пуши, проводят внутри приложения  на 16% больше времени, чем те, которые не получают никаких оповещений на свой телефон. Догадались о чем пойдет дальше речь? О важности мобильных пушей для вашего мобильного приложения и бизнеса.
      Push уведомления настраиваются с помощью бесплатного тарифа на сервисе push.gravitec.net/push в стоимость модуля не входит.
       
      ВИДЕО
       
      Совместим со всеми версиями OpenCart и ocStore.
       
      ДЕМО
       
      ЛИЦЕНЗИЯ

      Лицензия дает право на установку модуля на один тестовый домен и на один рабочий домен.
      При покупке модуля обязательно указывайте тестовый и рабочий домен.

      ОБЯЗАТЕЛЬНЫЕ ТРЕБОВАНИЯ ДЛЯ РАБОТЫ МОДУЛЯ

      1. Подключение по https
      2. Ваш сайт должен быть адаптирован для показа на смартфонах и планшетах
      Работает в браузере Chrome на платформе Android для смартфонов. Для десктопов на платформе Windows 10 также в браузере Chrome.
      Другие браузеры включая Apple планируют включить полную поддержку данной технологии в ближайшее время.
       
      В настройках модуля можно изменить:
      Настройка времени, через которое посетителю сайта показывается баннер с предложением установить приложение.
      Настройка внешнего вида баннера.
      Настройка текста и значка на баннере.
      Настройка "Моментальных страниц"

      ДОПОЛНИТЕЛЬНЫЕ УСЛУГИ
       
      Установка модуля на хостинг
      Установка приглашения "установить приложение вашего магазина" в мобильное меню или другое место вашего сайта
      Настройка push уведомлений на сервисе push.gravitec.net/push
      Настройка кэширование данных магазина
       
      ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ
       
      О технологии PWA можно почитать здесь https://ru.wikipedia.org/wiki/Прогрессивное_веб-приложение
      Добавил colaweb Добавлено 03.05.2019 Категория Платные шаблоны Системные требования https Метод активации По запросу на почту Ioncube Loader Нет OpenCart 3.0
      2.3
      2.2
      2.1
      2.0
      1.5.6.4
      1.5.6.3
      1.5.6.2
      1.5.6.1
      1.5.6
      1.5.5.1
      1.5.5
      1.5.4.1
      1.5.3.1 ocStore 3.0
      2.3
      2.2
      2.1
      1.5.5.1.2
      1.5.5.1.1
      1.5.5.1
      1.5.4.1.2
      1.5.4.1.1
      1.5.4.1
      1.5.3.1
      1.5.2.1
      1.5.1.3 OpenCart.Pro, ocShop Не проверялось Обращение к серверу разработчика Нет Старая цена 0  
    • By Romaleg
      Всем привет, впервые столкнулся с такой проблемой, может кто знает, с мобильной версии яндекс браузера не загружаются скрипты при загрузке сайта на главной странице, т.е. если заходить на сайт, сайт загружается, все, кроме иконок и, видимо файла со скриптами корзины, так как корзина не работает, ничего не добавляет, не открывает, но если зайти на страницу товара, а потом на главную, то все работакт как надо. Такая проблема только в мобильном яндекс.браузере, может посоветуете как можно сымитировать заход на сайт с этого браузера но с нормальными инструментами, дабы разобраться в чем проблема? https://bashpchel.com/ вот сам сайт. Кстати, если обновлять главную страницу, то проблема остается, уходит только если зайти на другую страницу, а потом перейти на главную
    • By Kara0505
      Добрый день! Подскажите, пожалуйста, в чем может быть проблема. Сделала в мобильной версии товары в 2 колонки, но появились пробелы


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.