FROM CACHE - en_header

How to move search icon and cart icon to the same level as the menu nav bar list items in Dawn theme

Solved
justauser
Excursionist
42 0 11

I want to get the shopify header search icon and the cart icon to the same level as the menu items level, please refer the video below for clarification, any help would be much appreciated 

Thank you

Accepted Solution (1)

Accepted Solutions
bhavini
Shopify Partner
52 16 23

This is an accepted solution.

Hi @justauser 

 

Just add this code

1. Go to Online Store=>Theme=>Edit code
2. Asset=>base.css paste bellow code in bottom of file.

 

details-modal.header__search {
    position: absolute;
    top: 50%;
}

.header__icons {
    position: absolute;
    top: 50%;
}
@media screen and  (max-width: 989px) {
details-modal.header__search {
    position: relative;
    top: unset;
}

.header__icons {
    position: relative;
    top: unset;
}
}

 

Please check the attached screenshot URL: https://prnt.sc/Fya0V-B6Y3cc

 

Thanks.

- If helpful then please Like and Accept Solution.
- Feel free to contact me on bvnpatel2307@gmail.com regarding any help!

View solution in original post

Replies 5 (5)
Denishamakwana
Astronaut
1003 135 167

Welcome to shopify community.

Please share your store URL and if your store is password protected then please provide password too.

Thank you.

If helpful then please Like and Accept Solution. Want to modify or custom changes on store Hire me. Feel free to contact me on denishabhensdadiya@gmail.com | Shopify Design Changes | Custom Modifications In to Shopify Theme
justauser
Excursionist
42 0 11
bhavini
Shopify Partner
52 16 23

This is an accepted solution.

Hi @justauser 

 

Just add this code

1. Go to Online Store=>Theme=>Edit code
2. Asset=>base.css paste bellow code in bottom of file.

 

details-modal.header__search {
    position: absolute;
    top: 50%;
}

.header__icons {
    position: absolute;
    top: 50%;
}
@media screen and  (max-width: 989px) {
details-modal.header__search {
    position: relative;
    top: unset;
}

.header__icons {
    position: relative;
    top: unset;
}
}

 

Please check the attached screenshot URL: https://prnt.sc/Fya0V-B6Y3cc

 

Thanks.

- If helpful then please Like and Accept Solution.
- Feel free to contact me on bvnpatel2307@gmail.com regarding any help!
justauser
Excursionist
42 0 11

Hey thank you so much for responding! 

worked perfectly!  🙂

much appreciated 

bhavini
Shopify Partner
52 16 23

@justauser 

You're welcome!!

Thank you😊

- If helpful then please Like and Accept Solution.
- Feel free to contact me on bvnpatel2307@gmail.com regarding any help!