Меню гамбургера CSS неправильно трансформируется на большом экране

У меня есть гамбургер-меню CSS, которое должно отображаться на экранах размером до 525 пикселей. После этого размера гамбургер-меню должно превратиться в обычное меню, состоящее из 4 ссылок, плавающих справа от страницы, а логотип — слева. Вот полный код: https://codepen.io/Cilvako/pen/zjvBrE

<div class="nav">

         <h1>Zero Gravity</h1>

         <label for="toggle">&#9776</label>

         <input type="checkbox" id="toggle"/>

       <div class="menu">
           <a href="#">About Us</a>
           <a href="#">Contact</a>
           <a href="#">Blog</a>
           <a href="#"><span>Free Trial</span></a>
       </div>

    </div>

Хотя я делаю содержащий div из 4 ссылок display: inline-block, он по-прежнему занимает всю ширину div и отображается под h1 (логотип).

Как я могу сделать так, чтобы h1 и меню (.menu) отображались рядом друг с другом, имея одинаковую высоту? У меня действительно нет идей.


html css hamburger-menu navbar
person Casia Hospi    schedule 21.04.2018    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Попробуй это

CSS

@media only screen and (min-width: 525px)
.menu {
    text-align: right;
    display: inline-block;
    float: right;
    width: auto;
    clear: none;
}
person Jyoti Pathania    schedule 21.04.2018
comment
это сработало, спасибо. Можете ли вы немного объяснить, как работал ваш дополнительный код? Я никогда не использовал clear: none до сих пор. Спасибо еще раз! - person Casia Hospi; 21.04.2018
comment
@CasiaHospi Поскольку вы создали h1 элемент float: left и .menu класс float:right, а также упомянули классы с clear: both and width: 100% по .menu. Так как clear оба предотвращают плавание меню вправо и ширину 100%. - person Jyoti Pathania; 21.04.2018
comment
правда, есть смысл. Он перезаписал стили для мобильной версии. Спасибо! - person Casia Hospi; 21.04.2018

arrow_upward
1
arrow_downward

Собственно, в данном случае виновник ясен: как вместе с width: 100% в селекторе .menu.

Вы должны избавиться от width: 100%, и вы можете использовать clear: right (вот где вы должны сделать очистку).

Я бы порекомендовал полностью отказаться от float (удалить float: left, clear: Both и width: 100% из .menu и удалить float: right из медиа-запроса .menu. Это прекрасно работает).

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

Также я бы порекомендовал вам взглянуть на flexbox. для макетирования, а также сетка CSS. Последний сейчас работает только в современных браузерах (я думаю, что у Edge все еще есть проблемы, IE - нет и никогда не сможет с этим справиться).

person stove    schedule 21.04.2018
comment
Фрагмент кода, который я разместил, является частью более крупного проекта, поэтому ваше решение на самом деле не работает. Я только изучаю CSS и пытаюсь понять самые основные методы, прежде чем переходить к Flexbox или сетке CSS, но я обязательно их проверю. Спасибо! - person Casia Hospi; 22.04.2018