Change content position on the header

Store Design
,
1

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:

Mohd01_0-1737630006558.png

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

2

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

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

3

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;
}

ZestardTech_1-1737631311591.png
ZestardTech_1-1737631311591.png1898×384 173 KB

Let me know if you need further assistance!

4

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

5

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:

image_720.png
image_720.png719×387 143 KB

I hope this helps

Best,

Daisy

6

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

Mohd01_0-1737633265031.png
Mohd01_0-1737633265031.png1901×143 11.3 KB

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

7

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;
}

ZestardTech_0-1737634255876.png
ZestardTech_0-1737634255876.png1887×382 177 KB

Let me know if you need further assistance!

8

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!