1. Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела
    Скрыть объявление

[Помогите] Адаптивное меню bootstrap4 - есть нюансы?

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем AlexGood, 8 апр 2018.

  1. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Есть тестовая верста с использованием мобильного адаптивного меню на бутстрап4.
    http://testbcard.bootstrap.dtraduga.vh55.hosterby.com/
    Есть вопросы:
    1) при нажатии на пункт "Плацi Моцна!" появляется выпадающее подменю - как его можно поместить под основное а не поверх. Бутстрап 4 все перекрывает и слоями не получается?
    2) как привязать выпадающие блоки подменю, чтобы они держались своего родителя и каждый раз после смены разрешения не улетали в небытие и их не приходилось сдвигать маргином?
    3) при малом разрешении (700px) при нажатии на бургер у открытого выпадающего меню с боков по 1px непонятно из-за чего и никак не получается их убрать? http://joxi.ru/V2VK1QQIx3xwoA
     
  2. spy

    spy

    Регистрация:
    15 янв 2013
    Сообщения:
    468
    Симпатии:
    137
    1) сначала высоту увеличь для того что б подменю в слайдер не упиралось
    2) правильно структуру сделай и позицинирование для родителей
    3) В стилях у тебя для .navbar - падинг в ремах дает отступ (уменьш)
    PS: у тебя все проблемы не из-за бутстрапа, а не знания css-а))
     
    AlexGood нравится это.
  3. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    1) оно не упирается, просто оно над им, а надо чтобы было под ним: http://joxi.ru/J2bl7MMIXZVnLr
    2) основному меню я делаю: position: relative; и z-index: 999; а выпадающему: position: relative; и z-index: 10; - но это не помогает - что не так с позиционированием?
    3) все понял) - как я сразу не заметил
    P.S. критика приветствуется, но москва тоже не сразу строилось))) поэтому и прошу помощи у тех у кого опыта больше...
     
  4. spy

    spy

    Регистрация:
    15 янв 2013
    Сообщения:
    468
    Симпатии:
    137
    1-2) это не под ним, а ниже просто :Mocking:
    маргинами сделать отступ.
    Но ты там намудрил со стилями для меню, а там где надо - родителям, вообще незадал никаких стилей + самому блоку меню))))
    возьми уже готовый в интернете блок со всеми стилями или посмотри как на других сделано))
     
    AlexGood нравится это.
  5. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Я брал бутсрапа пример с адаптацией и только бургер с поворотом прикрутил и немного стилей с w3schools.com.
    Может что подскажете, линк на какой толковый примерчик меню?
     
  6. AlexGood

    AlexGood

    Регистрация:
    28 ноя 2016
    Сообщения:
    254
    Симпатии:
    7
    Можете подсказать что не так с позиционированием и привязкой выпадающих пунктов? Так то меню полностью готово и адаптировано, единственное только этих 2 нюанса, - но что-то я туплю, так как ничего не срабатывает.
     
  7. spy

    spy

    Регистрация:
    15 янв 2013
    Сообщения:
    468
    Симпатии:
    137
    примеров скольугодно в интернете.
    Гугли и в перед))
    Раз, два.
     
    AlexGood нравится это.