how to add photos to navigation shopify

this tutorial is powered by,askquesti.com,get help with your website on demand and,don't forget,subscribe for more tutorials this video,is powered by askquesti.com get your,shopify questions answered on demand for,affordable prices,how to create an image based nav menu or,add images to main,nav menu and shopify,the user posted this site which has,a nav menu with these images on the,bottom so we're going to be working on,these ones at the bottom okay so i'm,just going to go,and close this and i have here my,shop test shop and first thing,first thing we want to do is to upload,the,images that are going to be behind the,map items so let's go into our shop,and go into settings,and i've already made a,two different images to,show this example with,dimensions of 500 width of pixels and,300 pixels,high you can do these smaller or bigger,but it's up to you,so let's go ahead and upload the files,i'm going to upload two files for two,different,um you know images in the menu,so go ahead and upload those two files,and there we go so now write down these,two links are very important,we just need them so write them down,somewhere,i have another window so i can write,them down,there we go so once we've done that,let's go ahead and go into the menu and,right click,and inspect this is the important part,right so as we can see here,we have a link with an a,and this is the one we want to be,targeting,so let's just go ahead and check up here,we have a list and an ordered list so i,think a good selector would be to use,the unordered list and then use the nth,child selector to select each of the,lists,and use a different image and at the la,at the last set step use a,use the active class to target,those menu items you'll see what i mean,in just a second so,i'm going gonna go ahead and make,this selector and we're going to make,this custom,selector out of here so let's just go,ahead and say,unordered list,dot site,and it's going to be the first,item of the list of child one,and we want to target that link so,that's where we want to put the,background,image and i'm going to copy,the image i want,and close curly braces so hopefully,that's,that makes sense and now,we want to target the,down another list that is active the,list,item that is active so let's go ahead,and use,all another list dots,now because,site nav and then you know there's many,ways to do this but,this should work site,nav active and then target the,link inside and also use the background,image url,and then paste the url of the second,image we uploaded,don't forget the semicolons on closing,so now we're gonna,we're going to copy this,and let's go ahead and go into the,code so online store i'm using the debut,theme,actions edit code,right there let's go into the assets,folder,and theme.scss.liquid scroll to the,bottom,as this is css is its cascading style,sheet so,whatever you put at the bottom will,probably override,whatever is at the top and copy and,paste i mean paste,the code we just wrote down,and save,okay so once we've saved let's go ahead,and refresh this,and see if this is working,and there we have the image set,for the active and the first item so,they're repeated here,so basically now that i've clicked on,the other one we know they're working,properly because we have one image,for the active one and one image for the,first,list item so obviously this doesn't look,how we want it to look,yet let's go ahead and use the console,again,and now we can target the link as well,and now we have the background image,so let's go ahead and,play around a little bit with this and,let's first set the width,of 9 viewport width,height around,around a little bit with this before,so background position center,so it's looking a little bit better now,background size very important,and now we want this link to be in the,middle of the image how do we do that,well there's,many ways to do that one of them would,be to target this and say display,and then use a vertical align middle,property so i think that,is pretty good,what do you think um,this should work so now let's go ahead,and copy this code,and paste it in the,code that we've written down right here,so the,they are we're going to have to copy it,into both selectors,just to make things a little easier to,understand,and then we have,and then let's go ahead and save and,refresh,and see how it behaves,okay so this is the active image this is,a pink one,and when we close on the first one well,it cancels out because it's the active,one which is really nice,so we can go ahead and,just add different images to different,elements in the list,or we can just target,all the elements in the list by removing,this nth child selector,i will showcase this go ahead and save,and refresh,and there we go so now we have an active,and we have a menu that changes with the,different selections hope you enjoyed,this,this was alex from ask questi and i'll,see you guys in the next one,thanks for watching if this was helpful,please subscribe,and if you need extra help visit,askquest.com and send us your questions

Congratulation! You bave finally finished reading how to add photos to navigation shopify and believe you bave enougb understending how to add photos to navigation shopify

Come on and read the rest of the article!