header menu problem

[tdil]

first of all, i want too reduce the space between the search bar and the user icon

i would like it will be like the space between the user and cart icons.

i also have problem with the maburger menu- it doesnt open the menu currectly while clicking on it.

as you can see the menu is open but nothing can be seen,

and in mobile display, the header icons are little messy

i need the menu o be on the right, and user, search&cart icons on the loft, jusy like in the desktop display

thank you all for the help.

[Sangeetanahar]

Hello @tdil 

can you please share your website URL.

Thanks

[tdil]

https://b08795-42.myshopify.com/
pass omulaw

[Sangeetanahar]

Hello @tdil 

for mobile

1.Go to online store ----> themes ----> actions ----> edit code ---->assets ---->base.css ---->
add the code at the bottom of the file

@media screen and (max-width: 749px) {
.header__icons {
    position: absolute;
      top: 26px;
}
}

2.Go to online store ----> themes ----> actions ----> edit code ---->section.....>header.liquid

search code

@media screen and (max-width: 749px) {
    #shopify-section-sections--16871060242568__header header-drawer {
         grid-area: icons; 
        margin-left: 0 !important;
    }
}

and replace this code to new code

@media screen and (max-width: 749px) {
    #shopify-section-sections--16871060242568__header header-drawer {
       
        margin-left: 0 !important;
    }
}

result will be

Buy me a Pizza

- If helpful then please Like and Accept Solution.

Thanks

[tdil]

hey i cant find this part in the header.liquid file

[Sangeetanahar]

Hello @tdil 

I am completed one Task

Go to online store ----> themes ----> actions ----> edit code ---->assets ---->base.css ---->
add the code at the bottom of the file

@media screen and (min-width: 768px) {
details-modal.header__search {
    position: absolute;
  
    left: 73%;
}
}

result will be

 and i am working on other task which you give us.

If this was helpful, hit the like button and accept the solution.
Thanks

[tdil]

it now looks like this:

in the right side instead of left side and when i click it it opens like this

instead of like this

[tdil]

@Sangeetanahar 

[GTLOfficial]

Hello @tdil  ( --> you can see the menu is open but nothing can be seen )

Go to online store ----> themes ----> actions ----> edit code ---->base.css
add this code at the end of the file.

.menu-drawer {
visibility: inherit;
}

 result

If this was helpful, hit the like button and accept the solution.
Thanks

[tdil]

thank you it worked!

[Sangeetanahar]

Hello @tdil  

for menu

Go to online store ----> themes ----> actions ----> edit code ---->assets ---->component-menu-drawer.css ----> line number 29
change the code
visibility: hidden
to

visibility: visible;

result will be

Buy me a Pizza
- If helpful then please Like and Accept Solution.

Thanks