Change content position on the header

[Mohd01]

Hi all,

I want to change the content of my header so that my logo and the menus are to the far left and my login, cart, language/country selector and the search icon are to the far right.
This is an image that describes what I want to do:

Store URL: https://cngdxq-tk.myshopify.com/
Thanks In Advance,

[topnewyork]

Hi @Mohd01 
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

<style>
@media (max-width: 768px){
.header__icon .svg-wrapper {
    margin-left: 22rem !important;
}
    .header--middle-left .header__inline-menu {
        margin-left: -40rem !important;
    }
.header__heading-logo {
    margin-left: -61px !important;
    transform: scale(2.5) !important;
}
}
</style>

 If my reply is helpful, kindly click like and mark it as an accepted solution.
Thanks!

[ZestardTech]

Hello @Mohd01 ,

Here are the steps to apply the necessary changes in your Shopify store:

1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
2. Locate Asset > base.css and paste the following code at the bottom of the file:

.header {
    display: grid !important;
}
sticky-header > .page-width {
    max-width: unset !important;
}

Let me know if you need further assistance!

[Mohd01]

Hey, that worked! But is it possible to increase the size of the menus and the space between them just a little bit more?

[ZestardTech]

Hello @Mohd01,

Here are the steps to apply the necessary changes in your Shopify store:

1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
2. Locate Asset > base.css and paste the following code at the bottom of the file:

.list-menu--inline {
  gap: 2rem !important;
}

Let me know if you need further assistance!

[Mohd01]

Hey, It did increase the space between them, but didn't make the items bigger, is it possible to do that maybe?
Thanks in advance!

[DaisyVo]

Hi @Mohd01 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

@media screen and (min-width: 769px){
header.header {
    display: grid !important;
    gap: 0 !important;
}}

Here is the result: 

I hope this helps

Best,

Daisy

[Mohd01]

Hey, I did exactly what you said but it didn't work. This is how it looks:

I want to increase the size of menu items (HOME, SHOP ALL, etc) and increase the space between them just a little bit