Trouble with navbar and logo in header, Responsive

[Adziky]

Hello guys,
I have problem with header. Currently I doing Responsive dizajn and there is a trouble. I dont know how to put .menu under logo.
When i write for navbar display:none, logo will be in center. But with navbar logo is not in center, like on picture

codepen: https://codepen.io/Adzikk/pen/rNyBYqb

Why it doesn’t work ?

Thank you for your help and have a nice day:)

[PaulOB]

Add an extra class to the .container that wraps the logo and add flex-direction:column to the new class in your smaller screen media query. You can’t use container directly because it is used elsewhere so add an extra new class to that item.

e.g.

<div class="container logo-wrap">
                <div class="logo">

@media screen and ( max-width: 920px){ 
  .logo-wrap{flex-direction:column;}
   header{height:auto;}
}

Avoid using fixed heights for things that don’t need them like your header otherwise your content will overlap like it already does in your header example.