search bar on motto theme

[Kristjan777]

does anyone know how to move the search bar from dropdown menu to the header on motto theme phone version. it is in the header on laptop version but on phone it is very hard to find the search

[Mustafa_Ali]

hey @Kristjan777 share the URL of your website so i can help you

[Kristjan777]

well apparently the word is banned for some reason so i cant post it, but let me try this bio fit.is just remove the space between bio and fit

[Mustafa_Ali]

so then no issue

[Kristjan777]

yes, its https://bio fit.is/ but you have to remove the space between the the words bio and fit, in cellphone version i want the search bar to be moved from the dropdown menu to the header, thank you

[Mustafa_Ali]

<style>
@media screen and (max-width: 767px) {
.menu-drawer__bottom {
    display: flex !important;
    justify-content: center !important;
    padding-left: 23rem !important;
    position: absolute;
 }
}
</style>

Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->
under the <style> tag before the body ----->
if this code work please do not forget to like and mark it solution

[Kristjan777]

I'm no coder so i dont quite understand, can you be a little bit more specific?

I cant send a screenshot of what im doing because it comes in png and i dont know how to change it

and I want the search bar out of the three dot and to the front page header, just to be a little clearer

[Mustafa_Ali]

ok i very simple follow these steps 

open the shopify admin page 
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->

and place the code if you need more help then ?

<style>
@media screen and (max-width: 767px) {
.menu-drawer__bottom {
    display: flex !important;
    justify-content: center !important;
    padding-left: 23rem !important;
    position: absolute;
 }
}
</style>

[Kristjan777]

i cant get it to work, I dont know where to place the code

[Mustafa_Ali]

first open this one 

then open these three dots 

then open edit code option 

then open then theme.liquit file 

and last but no a less place then code before the body

[Kristjan777]

ok I found where to put it and it worked but the search bar is still in the "three dot drop down menu"

i want it to be on the front page header on the left side of the cart or "karfa"

[Mustafa_Ali · Accepted solution]

@media screen and (max-width: 767px) {
.header__search {
    display: flex;
 }
.menu-drawer__bottom-right {
    display: none !important;
 }
}

follow the same steps that i all ready given to you above 

and if i manage to help you then don't forg

[Kristjan777]

it worked! you are the champ! thank you very much!!