Как вставить логотип и меню в одной строке?

Question

[Mymacom]

Здравствуйте. Не как не могу поставить логотип и меню на одну строчку. Получается, что логотип выдавливается вниз. Покрасил в зелёный, то что выдавливает. При absolute наезжает на меню.
https://codepen.io/Mymacom/pen/NQjovp

Comments

[alex steel]

а так (скрин) prntscr.com/ommb5p

[Mymacom]

alex steel, с первого взгляда да, но меню адаптивное (гамбургер), а с ним что-то не так просто. Конечно можно засунуть в медия скрин, но какая-то примитивность мучает

Answer 1

[Kerhin]

Ну самое простое, что ты можешь сделать, так это добавить свойство float: left; для id Menu. (Но это далеко не самый лучший вариант)

Но лучше добавь им двоим (#logo и #Menu) float: left;. После чего добавь ширину для твоего лого (в отладчике показывает, что его ширина примерно 175px). А для #Menu добавь ширину 100% отняв отуда ширину лого. Примерно так -> ( width: calc(100% - 175px); ).

Comments

[Mymacom]

Все равно вниз сдвигает

[Ibishka]

Не используй float.При том что есть flexbox

Answer 2

[lagudal]

я бы для меню и лого добавил общую обертку, какой-нить header-top etc, и ему flex - на тех же флексах и меню отдельно... но это дело вкуса, я так привык...

Answer 3

[Ibishka]

Берешь div внутри logo и nav > ul > li.Пишешь для ul display: flex; и margin right для li.А потом пишешь для div display: flex; justify-content space between align items center и задаешь ширину для div. Для лого пиши display block.