[FIXED] How to move my header-logo above the menu items?

Issue

I am trying to optimize my shopify store for mobile. But I ran in an issue that I can't fix. My mobile version looks like this right now:

I would like to make the logo bigger, but yet I need the other icons displayed aswell. I was wondering if there is a possibility to move the logo to a line above the other icons in mobile version. So my mobile header would have two lines; on the first is the logo and on the second all the other icons. This would look somehting like this:

My store url is: snow-pearl.com and I am using the debut shopify theme. You can find the header.liquid code by clicking here.

If this isn't possible only for the mobile version, is it possible to implement in the desktop and mobile version? It doesn't matter if the logo is a line above everything else in the desktop version aswell.

Any help or ideas are greatly appreciated. Thanks so much!

If you need to know anything more, don't hesitate to ask.

Solution

You need to add this CSS to make your block to switch to column.

-webkit-flex-direction:column;
flex-direction: column;

Flex-direction documentation

On this existing CSS:

@media only screen and (max-width: 749px){
  .site-header__mobile-nav{
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    -o-align-items: center;
    align-items: center;
  }
}

After that you will need to fix the width of your blocks.

Answered By - MaxiGui

Answer Checked By - Mildred Charles (PHPFixing Admin)