How can I move icons in my mobile header?

[ShootsDraws]

Hi,

I am having an issue with my site's mob menu. Preview link: https://gww83pkp2ac12fkz-65019576489.shopifypreview.com

As you can see in the attached image below (red background), everything is jumbled up and the logo is not centrally aligned. I am aware that the issue is due to having too many icons placed there.

I would like to move the search icon to the bottom of the nav menu to help with this. Ideally I only want the cart icon on the righthand side, but I believe I have to wait until my site is live before being able to move the country selector to the nav menu too.

Below are images of the header in its current state (red background), and an example of how I would like it to look (green background). If anyone can help with this, that would be great!

[LuffyOnePiece]

Hi @ShootsDraws ,

It seems it is password protected.

Can you please share a preview URL so that I can help you out.

Thank you

[sanjaykmr]

Hi @ShootsDraws 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the active theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

@media only screen and (max-width: 600px) {
  header .mlveda-form,
  header details-modal.header__search{
        display: none;
    }
}

And save. 

[ShootsDraws]

Thanks for your help @sanjaykmr 

This did a great job of cleaning up the header, but I would still like the search icon and flags to appear at the bottom of the nav menu. Is this possible?