how to put a white header bar on shopify

g'day folks welcome to the frustrated,drop shipper in this video I'm gonna,show you how to change the text color of,your top menu these icons as well as the,drop down menu under your mobile version,so right here so if you had a logo that,Rick that you wanted to have a dark,color up in this header I showed you in,a previous video on how to change the,color of your header but if you wanted,to have a dark color in this header then,obviously having dark text on a dark,background it's not going to work,however if you change the text to a,light color for these two options here,anyone who visits your site under mobile,wellgo will get the light text on this,light background here so you'll want to,update both the text color of your,header as well as the background color,of this drop down menu if you're going,to have a dark background with a light,text so that's it this one I'm going to,show you in this video if you want to,know how to change the background color,go ahead and check out the other video I,have on the channel so without wasting,any more time and I'm gonna go ahead and,show you how to do it so the first thing,you want to do is go ahead and go to,your drop shipping store click down,under online store and be under the,themes section under this drop down menu,choose the actions and edit code once,you're under the cold page now I already,have the file load up but to load this,fall you go to the search box and type,in theme dot s CSS dot liquid and under,assets you'll see this fall here click,on it open the file and then go right,down to the very bottom so in the last,video I showed you to add this line of,code here and this is what allows you to,change the background of your header so,now I'm going to show you what code you,need to add in order to change the rest,of the sections so this piece of code,right here I'm just gonna copy and paste,it in this piece of code right Oh,actually no I'm gonna let me backtrack a,bit we'll cover that one after,back here just give me a second here,alright so we'll grab this code and this,code here I'm gonna paste that in so,what this code does so as I mentioned,this bit here is for the background,color of your header now you can I guess,you don't really need to see the other,video now but that's the code there and,this section here it says change the,header navigation and icon color and I,added this section here and this,actually nav item color my mistake not,icon so this section here will change,just the menu so if you add this code,here put in your color code that you,want to use this will change just this,portion here only so let me go ahead and,show you that now so I'll take out this,here and go ahead and save go ahead and,bring up the site again and now as you,can see this is obviously not the colors,I'm choosing it's just random color so,as you can see the menu has updated to,reflect the change that you made here,with this code for the icons however,these over here these are still dark so,you're gonna want to actually update,those as well so the remaining code here,will allow you to change it so the icon,search icon cart the icon hamburger I'm,not actually sure what the hamburger is,it's oh that's probably yeah that's,probably this here I'll show you,I didn't realize to call it a hamburger,so this is probably called the hamburger,cuz it looks like a hamburger so I'm,going to assume that that's what they,mean by hamburger and then the icon,customer which would be the over here,how would this theme don't have it the,icon customer would be the little,picture of a the little icon to access,your account a little,picture of a man I guess a little icon a,little picture of a customer so that's,pretty much it there so once you add,this code here you've got the option to,change the color of the text as well as,the color when you put your mouse over,the text so I'm gonna go ahead and show,you that now let's go ahead and save I'm,gonna go to the would refresh the page,again these extra ones down and now as,you can see I chose this is a random,colors but the icon and everything is,white and when you put your mouse over,it it turns red so when the mat over,here if you put your mouse over it,you'll see that that happens as well,same thing happens under a mobile,version all the icons are white and well,I guess on a mobile version you don't,have you don't put your mouse over,anything so there's no hover but as you,can see the icons are change to the,color that we have in the text so but as,you can see if I had have chosen a white,well I'm not gonna change it but if I,had chosen a very light color instead of,orange here when we went into the mobile,version and the check clicked sorry the,drop down you would have had white text,on a white background which obviously,wouldn't be very useful so to change,that background color all you need to do,now is a head this piece of code right,here so I'm going to go ahead and copy,that throw it into my file so this piece,of code here takes the mobile navigation,wrapper which is the background for that,submenu and change to the background,color to whatever color you want it to,be so I'm going to go ahead and save,this I'm going to bring up the site,again I bring it up this way because it,it you're more likely to have a fresh,page rather than draw on the cache from,the computer so once we go into the,mobile version of this now and we click,on it as you can see now the background,color of this drop-down menu matches,whatever color you wanted to,so if you add a light texture you're,gonna obviously want to have a darker,background,my personal preference would not be the,same color as the header color because,it doesn't really look that great but,definitely you want a different shade,but have a darker color than your text,so you can actually read it so that's it,folks that's how you change the,navigation menu color the icon colors as,well as the drop down background color,of this menu when you're viewing it from,a mobile device so a very simple process,very simple I haven't tested it on other,themes but I'm sure it's pretty much the,same for majority of themes or at least,you you can figure out some,modifications to it so if you have any,questions for coms go ahead and comment,below I'm planning on putting out a lot,more videos like this whenever I run,into a problem that I think other people,will have the same problem I'm gonna,probably create a video for it and post,it so that you can get answers to your,questions and help you grow your drop,profile business along has while I'm,growing mine so I'd like for you to,stick with me if you enjoyed these,videos go ahead and subscribe below hit,the notification button obviously hit,like on the video if you enjoyed it,everything will help I want to grow this,channel as much as I can so I can help,as many people in the dropshipping space,as I can possibly do and hopefully,between everyone we'll get our,businesses on the go get some extra,money in our pockets that's what the,goal is ain't it,so have a great day I don't have,anything more for this video so see you,later

Congratulation! You bave finally finished reading how to put a white header bar on shopify and believe you bave enougb understending how to put a white header bar on shopify

Come on and read the rest of the article!