Мобильная версияЯ пытаюсь заставить работать навигационную панель, реагирующую только на CSS, я установил точку останова, которая отображает гамбургер-меню с разрешением 768 пикселей и ниже, у меня навигационная панель работает нормально, но когда я пытаюсь добавить какой-либо контент под навигационной панелью, когда точка останова превышает 768 пикселей, содержимое отображается внутри, а не как блочный элемент.
Вот так:
Скриншот тега H1, отображаемого в строке
Я попробовал добавить сетку CSS, надеясь, что она отделит панель навигации от других элементов.
.header { ширина: 100%; z-индекс: 3; } .header ул { маржа: 0; заполнение: 0; стиль списка: нет; переполнение: скрыто; } .header ли { цвет: #ffffff; вес шрифта: 700; размер шрифта: 22 пикселей; } .header ул а { дисплей: блок; отступы: 5 пикселей 20 пикселей; текстовое оформление: нет; } .header ul a:hover { цвет: #BDBDBD; } .логотип заголовка { плыть налево; дисплей: блок; размер шрифта: 2em; отступ: 10 пикселей 20 пикселей; } .header .меню { ясно: оба; максимальная высота: 0; переход: максимальная высота .2с легкость выхода; } .header .menu-icon { отступы: 28 пикселей 20 пикселей; положение: относительное; плавать: вправо; курсор: указатель; } .header .menu-icon .nav-icon { фон: #cccccc; дисплей: блок; высота: 2 пикселя; ширина: 18 пикселей; положение: относительное; переход: фон .2с ослабление; } .header .menu-icon .nav-icon:before { фон: #cccccc; содержание: ""; дисплей: блок; высота: 100%; ширина: 100%; позиция: абсолютная; переход: все .2 с ослаблением; верх: 5 пикселей; } .header .menu-icon .nav-icon:after { фон: #cccccc; содержание: ""; дисплей: блок; высота: 100%; ширина: 100%; позиция: абсолютная; переход: все .2 с ослаблением; верх: -5 пикселей; } .header .menu-btn { дисплей: нет; } .header .menu-btn:checked~.menu { максимальная высота: 240 пикселей; } .header .menu-btn:checked~.menu-icon .nav-icon { фон: прозрачный; } .header .menu-btn:checked~.menu-icon .nav-icon:before { преобразование: поворот (-45 градусов); верх: 0; } .header .menu-btn:checked~.menu-icon .nav-icon::after { преобразование: поворот (45 градусов); верх: 0; } @media (минимальная ширина: 48em) { .header ли { плыть налево; } .header ли а { отступ: 20 пикселей 30 пикселей; } .header .меню { ясно: нет; плавать: вправо; максимальная высота: нет; } .header .menu-icon { дисплей: нет; } LK Это заголовок
