WordPress advanced css add background images to your sub menu


hi guys and welcome to this video this
is Jamie from www.system22.net and https://great-webdesign.com in this video we’re gonna
show you how to do some advanced CSS customization so we can turn our
drop-down sub menu into something a lot more interesting with some images in the
background I’ll show you for example over here we’re gonna create something
like this okay so let’s get started the first thing we want to do is we want to
make this menu stretch out horizontally so that we can actually place images
behind our links here so let’s just inspect this which is a right-click and inspect or
f12 and there’s our submenu I think what I want is an Avila cui okay so that’s
what we got here that’s what I’m looking for right there there now let’s
unordered list so we’re going to add the CSS attribute of width 100 VW which is a
viewport width which should stretch it out across the screen okay let’s oh look at that
yeah as you can see that stretched it all out that’s what I’m looking for
along here and the next thing I want to do is I want to make sure these are in
the center it looks like they are at the moment and we want to get rid of that
blue border up there as well so I’ll make sure this is centered so we’ll do
text align Center and I see there’s another one out there so we want to just
give that the important attribute here that way it’ll overshadow the other one
up there and also we don’t want that light blue border that’s at the top
there so we’ll say border none’ should rid of that yeah that’s more like it
starting to shape up a bit there okay now we just need to copy this and go to
our theme options and down at the bottom of our theme options Divi theme options
at the bottom of the page you’ll see the custom CSS here let’s make a new entry
in here call it submenu I always like to put a title in here so
that if you’re looking through a lot of CSS you can find the section you’re
looking for easily with code editors it’s usually numbered so you can find it
by looking at the inspector and finding the lining number but with Divi it
hasn’t got it here and everything we doing here I’m used like I said I’m
using the Divi thing which is absolutely awesome but this will work with any
WordPress site you just have to use a bit of custom CSS with some themes you
may need to create a child theme so that the CSS doesn’t get overwritten if the
theme updates okay let’s paste in what we just created
just now don’t need that one and say our changes refresh and I should
stay the same but now that submenu on our third menu here should stretch all
the way across like it did just now there we go
but I want those to be over to the left and I want to give it some space so that
we can actually put an image behind it and each one I want to make a consistent
width so that we can put a decent image behind it so let’s select a fool with menus list item submenu so
it’ll be full with menu list item list item there we have what we want the dot now a
list item list item now we want to give it some space at the top so we can fit
in the image in there so let’s give it a padding top and 275 pix and that should
make it a lot deeper yeah that’s like it’s we got room to put an image up here
and let’s I want it over to the left-hand side so I need to float these
back over to the left-hand side so what float put a colon in semicolon
will not work left let’s check that out that’s better there over the left-hand
side here and I want them to be I know 200 250 something like that wide
so let’s give them a width of well in between 225 let’s say 2 25 pixels well
look a whole lot different I don’t think but that’s about right so we’ve got
enough room for a nice image to go in the background there so let’s just save
this to our custom CSS all I’m doing is a left clicking and dragging across to
select it make them ctrl C to copy it let’s drop down where we were just now
don’t need those last two because we did not change those okay that’s good let’s do a quick save now comes the fun
part this is where we put the actual images in that we want in the background
here so we want to add a nice background image here somewhere
let’s if you look at these list items here as I’m mousing over them you can
see they’re going green where the padding is and each one’s got an
individual ID menu item 799-801 a seven six two and it’s an ID so to add
attributes to it we’ll do what we want to do we can in our custom CSS because
it’s an ID we can do hash tag menu item and the number and then add the
attributes that we want so let’s go back to our custom CSS drop down a couple hashtag because it’s
an ID menu – item – whatever the number was I think it was 799 wasn’t it I may
have to change that a minute if that’s incorrect I think that’s what it was okay and what do we want to do to it we
want a Nana image to the background so that’s gonna be background image don’t
need a capital B let’s just have it back ran an image and with the background
image you have to give it a URL so we’ll do cool on URL to open some regular
brackets here some round brackets and in between them is where we want to put the
URL and you may say well how do I know the URL of the picture I want to put in
there or the image all will do is create a page can be a test page or any sort of
page you want I’ll just delete this you don’t need to keep this page don’t need
to use the Divi builder you can if you want you can just use the default editor
and just hit your add media tab I’ve uploaded the pictures I’m going to use
already here so just insert the picture that you want to use that’s into this
page here now if we go up to the text tab at the top here this is how we find
the URL if you scroll across and look for sauce SRC there it is equals here’s
the URL we want from that opening inverted comma so the closing one and
include both of them there make sure you include both inverted commas there copy
it ctrl C go back to our custom CSS and just paste that
in between those two little round brackets there and do a quick save she
won’t make sure I got a little semicolon on the end there cuz we will be adding
more attributes and like you do need it so let’s say that again now let’s have a
look at our site now there should be a little image on that first one do a
refresh and let’s have a look at our drop-down and there’s no image there
great did I get the idea wrong seven nine nine let’s have a look seven nine
nine that looks right okay background-image:url what’s going wrong
oh I see we’ve got a gap after the URL there we want no gap between the URL and
the first round bracket there make sure you’ve got no gap very obvious it won’t
work like mine didn’t work say that again and try it again refresh and hopefully this time there it is
there’s our image right there that’s fine it’s just inspect that a minute so
I’m going to do the same thing for the next four images there it is right there
so perhaps give it a separator by having a border on the right-hand side let’s give it up Oh right hand border of say two picks solid what white of course that that’s gonna
work nicer than the FFF and we’ll give it a border on the bottom a little bit
thicker let’s make it say three picks and we’ll use a blue color that I’ve
been using and we want a solid border rather than dashed probably won’t see it because it’s gonna
be the same color I think is that drop-down as for look-see
oh you can’t see it that’s okay it’s slightly darker blue that’s fine that’s
fine okay now we’re gonna rinse and repeat
for the rest of these which is really easy now let’s just do that quickly I
will copy this over I want those two attributes right there and we’ll add
those to our custom CSS okay so we’ve got that’s what we want
now we want to do the same thing for the rest of the menu items so there’s three
more of them I will copy this three times one two three now we want to
change our numbers there let’s just check those because they’ve got to be
right 8:01 8:02 and seven six two and seven six – I believe now my image is I’ve done it’s simply
I’ve done on one two three four five so we’ve got four there so let’s go five
I’m not putting much thought into it obviously you want to put more thought
into yours two one okay let’s save that and back to the site we should now have
images for all of those oh it’s refresh let’s get rid of our inspector just for
the moment that’s it we’ve now got background images for all of those
separated by that white line there and I think what we need to do obviously is
get rid of that background color of this submenu there we can do that we don’t
have to do that with CSS I think it’ll actually let us do that
in the page edit menu let’s just go back to the page fact I can hit the edit page
button up here and there’s the full-width menu that
we’ve been working on here so if we open it up go to the design it should let us
change that background color this one right here drop-down menu
background color I can just pull that all the way down so it’s transparent and
do a quick save update the page and preview our changes and there we go that backgrounds gone
there so there we have it that’s the way to add some images to the background of
your sub menu and add some borders with CSS quite a lot to it but once you’ve
done one it’s really easy so I hope you found that useful once again this has
been Jamie from system twenty two and great web design comm I hope you’ve
enjoyed this video if you have please subscribe to our Channel thanks for
watching have a great day Oh

Leave a Reply

Your email address will not be published. Required fields are marked *