shopify don't show header mobile

i am going to show you how do you,make this search bar up top here,mobile friendly right now if we,make a resolution smaller let me just go,ahead and make it smaller right here,you'll see that the search bar actually,goes away,we no longer see it in this navigation,menu,because the resolution is too small but,if you click into,the menu right here the menu button,then you'll get the search bar what i'm,going to do is it is mobile friendly,technically but what i'm going to do,is instead of requiring users to click,into this menu button,before they can search for an item or a,product,i'm going to make it so that the search,bar,is always showing all right so you,either have it up top right here,or we have it in the menu itself,i'll show you what i mean by that all,right,i'm gonna go over to my shopify admin,theme right here and,in my supply theme this is the theme,that i'm using right now,so this is the supply theme,let me go into our actions edit code,and where we want to go into or the file,that we want to go into,it's not in our templates but in our,sections category,header right here this header,file right here this is what controls,the navigation up top,first things first i'm going to add at,the very top here,i'll just show you very quickly without,any sort of,styling,if you include search bar this is,a snippet that you can include and you,save it,you refresh you'll get it at the top,but we don't want this to always show,the only time we want this to show,is when it gets to not even this,resolution,when it gets to a really small,resolution,so maybe your your iphone your android,so,somebody who's on their phone,that's when we want to show this so,instead of having it show up,in the actual navigation bar right here,i feel like that would be too small i'm,going to have it be full width,down below right underneath it,that's the idea all right,what i have to do is i have to,give class i'm going to add some styling,so you don't actually have to,create your own styling your own classes,shopify has classes that allow you to,hide and show,based on the resolution and this is all,it is that it takes right here,is this large,height medium hide,make sure you have the the double,hyphens in there the minus symbols,all right and let's just,surround it with that refresh,it's gone right so we don't see it in,any large,resolutions but if we start getting,smaller and smaller and smaller,it's still not there we don't see it in,there,but then when we go really small,that's when we'll see the search bar,all right now what you can do and chrome,has this little nice feature where you,can toggle by device,so if you're on an iphone 5 or se you'll,see it like this,if you're on an iphone 6 7 or 8 plus,but then the problem becomes when you,have,an ipad the ipad pro not a big deal,because it's basically,a monitor that's how big it is but if,you click on ipad,now you don't see it of course you can,still see it in the menu,but you can still see it in the menu,when you go to say the iphone 6,or 7 or 8. you'll still see it in the,menu as well,let's remove that because we are,now having the search bar show up on the,home page,always let's remove that from the menu,how do you remove it from the menu,if you scroll all the way down here in,your header header liquid file,line right now it's on line 108,just remove that,save refresh,you really don't need the search bar in,two places,that's my opinion if you want to leave,it there that's okay,but i'm gonna i'm going to do that now,the problem becomes when we don't have,the search bar now in the ipad,it's not in the menu because we just,removed it it's not here anymore,where is it what we'll need to do is,add some additional code right here and,i'm going to just copy this include,search bar real quick,and see where this mobile,nav bar is i'm going to add some code,right in between these two,display tables alright and i'm just,going to add this,very simply class equals,and i'm going to say small hide i want,to hide this,so when it's on small i don't want to,show this,and,save it just like that now i added this,additional div i'll show you why i did,that in a moment here,but if we refresh,we now see our search bar,and it happens to be in between the menu,and cart items,now this is looking pretty good let me,just go ahead and turn off this mobile,device right here that button,and if we start looking at the,resolution,keep going keep going this is still a,large resolution,now we get to the ipad we see the search,bar,pop up it's hard to see so you'll have,to do your own styling,for the search bar or maybe you have,different colors for your,your menu item here or your menu bar,right here so that might not be,so bad it might not look as bad as mine,does,but then if we keep going smaller and,smaller we still see it,so it should be gone with a small height,now let's see why it's not doing that,it's not doing that because i don't have,the double,hyphens in there so let's just save that,refresh,there you go now it's gone all right,so i had a little bit of a typo in there,and then again we don't see it in our,menu item anymore,perfect now it doesn't look the greatest,not yet right here,let's make this a little bit more,centered what you can do,in here that's why i have this,additional div in here is you can add,some styling i'm just going to add the,styling right here if you want to create,your own class,for this your own css class you can't,i'm just going to add this very simple,margin top,10 pixels just for the sake of getting,that,centered,there we have it now looks more centered,if you click on the menu,it still looks okay,scroll the way down it's still not there,but we see it,at a full width right here,and then it's gone once we get to,basically,a monitor when you're non-mobile,and it should all still work if we go,over here and i just click on,shirts or type in shirts you can't see,it right now because it's,in this uh in this menu bar right here,and again if you,want to change the styling you can,certainly do that,press enter it does my search doesn't,really matter where i'm at,if i put in here shoes,it'll do that as well alright so that's,how you make that search bar,a little bit more mobile friendly it,technically was because,of the menu item it was showing up in,here but some folks would rather have,this,search bar always be shown so that's,what we did here,based on your resolution it'll either be,up top,in the menu item or the menu bar itself,or,if it's really small it'll just show up,right underneath the menu bar,that's how you make your search bar,mobile friendly

Congratulation! You bave finally finished reading shopify don't show header mobile and believe you bave enougb understending shopify don't show header mobile

Come on and read the rest of the article!