March 28, 2020
Divi theme eCommerce tutorial – Customizing Nav Links and Buttons

Divi theme eCommerce tutorial – Customizing Nav Links and Buttons

hi guys and welcome to another Divi
theme ecommerce website built this is Jamie from system 22 and web design tech
tips calm this is where we left off last time we
just put in our secondary menu change the background color I’ll scroll and now what I want to do is I want to
pull these across so they’re more central they might have that one in the
middle certainly this one more over the left and I think I’m gonna decorate
these with a bit of custom CSS so let’s start on that just select this element
I’m using google chrome here and it’s great because of the developer tools
most of the browser’s have them now but if you want to follow along I suggest
you do this with chrome so what do we want to do here you select that secondary maybe yes so in Romania right there you don’t see it at the moment it’s float
floated right so if I flew that left it’s now on the left-hand side there but
I want it kind of more central so let’s get some margin on the left-hand side
a percentage probably 20 or 30% so it’s very margin left Cairo let’s try 25%
that is almost exactly where I want it that’s a little bit more can always
change this I just got it highlighted over again I’m
scrolling my mouse wheel I think that’s pretty much where I want
it so 30% I’m gonna copy that from the opening hashtag to closing curly bracket
their control see the coffee I’m gonna go to my dashboard and and the Divi
theme options which is where we are now general tab we scroll down to the bottom
he is our custom CSS block and this most alot of things when you use custom CSS
you have to develop a child theme to stop the CSS being overwritten when they
update with Divi it’s great it’s got this custom CSS you don’t have to do
that this will remain when it updates which is absolutely awesome so I’ve just
pasted that in there let’s save our changes and now what if I go back to the site
I’ll just get the inspector out of the way do a refresh hopefully that should
stay there yep that’s great let’s stay there that’s
just what I want okay now I think I’m gonna decorate these there all right
looking as they are but I want to sort of give them a bit of background and
perhaps have them have the text white let’s just try that and see what it
looks like so here EFT well you downloaded images out of the way they’re
not doing us any good here so I’m gonna hit f12 to get the Inspectorate inspect
one of these again or should be the anchor tag the a tag yep there it is you let’s get a background for that color which
was 10 ca ca that’s okay but of course we can’t see
the text because it’s the same color let’s make that text light am i doing hello may have to add the important
class when we go and copy that to overwrite what’s there
and let’s give it some padding so listen padding around these again we may have
to overwrite what’s on there it’s cuz I’m padding on the bottom there point
seven five M that’s why it’s not central if I take that away there we go let’s
add two classes we’re gonna first want to be top and bottom let’s it’s have a
guess at say ten picks top on what I don’t want it too big gosh that’s almost
exactly right plus 10 pixel route look bad what if I give it 20 pics
either side it might make it too wide that’s okay I think I want to bring it
back across this way a little bit so let’s copy this again control-c and back to our custom
CSS now let’s get rid of the stuff we don’t want don’t need the display:block
because we didn’t change that and the panic bottoms commented out anyway so we
just leave that just gonna add a title up here
because once we start adding more and more things get more difficult to find
if you put a title in bored slash star star forward slash comment it out what
the browser won’t read it but will be able to see where stuff is so secondary
many links and we’ll just say that what a feeling I
may have to add some important I have tributo after this to make Ashley
work we’ll see what happens when i refresh you no that’s good that stayed as it was
good well that’s that’s that’s good because I don’t like to users important
classes unless I really have to now let’s bring this back where we had it before secondary menu margin-left
changes 30 and I’m gonna highlight it and just roll it with my wheel too it
goes to bad world I want it to be probably right about there yeah I think that’s fine that’s actually
22 pixels I need to do is change that from 30 to
22 may changing in a later date because I
don’t know what items I’m actually gonna have up there we’ve just got our generic
pages up there for a moment so that’s okay I’m gonna say that now I need to
pull this stuff over to the left as well which is our our main menu here top many I stopped nav here
here we go that top now that’s float right so let’s try changing that to left
there we go let’s pull that over there and again a little tight up to our logo
I think I want to push it across just a little bit not a whole lot let’s give it
some margin left as well and we’ll do this by percentage again we’re not gonna
walk very much here well succeed Tencent we’ll try with that we can roll
it up walk well that’s not bad you what he is not bad you I think we’ll leave it at 12 so let’s
copy this across in from the hashtag they’re closing
curly control C to copy back to our custom this was a lot of secondary menu
this is primary menu so I’m going to give it another title not just working
all the links we’re working on the whole menu there so let’s paste that in
control V save it a nice little green checkmark they’re
telling us it’s saved let’s refresh this and hopefully it should stay exactly the
same yeah that’s fine good all right so we’ve
decorated that a little bit you not happy with these buttons here think
what I might do is use some custom CSS on them to have them a different color
per house and have them all the same width and then when we have buttons in
other areas we can do the same thing we could so every time we add a button
it’ll become the same if I do it with custom CSS let’s do that so I’ve gone to a site called Adobe
color and it’s saved what I got there cuz I’ve
already got it open all I did was put my color I’ve been using you hear and see
ACA in there hit the enter button and it comes up
with complementary colors for me or compound colors which will work with the
color I’ve got here I mean you can do shades you can do and a lot us
monochromatic triad complimentary compound which is what I go in shades
and make your own customer but in my compound I like the green that it’s
given us I quite like that hot pink I think I might use that for my sale tags
and I want to use this green for my buttons so I’m gonna copy its hex code
down just left clicking and grabbing it ctrl C now let’s go back to my page here
slip this button you et pad button that’s open and closed and
curlies there okay so what do we want water color for
the text and that’s gonna be white already is that’s fine and we want the
background color you want that green color who’s here copy that don’t paste that in there and I’m gonna give it a width so that all
the buttons that are same width let’s
two to five pixels we can change this in a minute if we don’t like it let’s see what we’ve got now so if I say
those changes and go back to our site refresh okay so it’s changed the length I can
see it’s changed the link there but it hasn’t changed our color let’s inspect
this and see why not take that off say you know it’s changed color so we
need to change the border of that color and we’ve got to tell it that that’s
important right there so let’s go back to our few options here let’s tell it
that this is important and also I want to align the text
centrally within that button it was aligned for the left and also the bordercolor wants to be
similar doesn’t that service order come and we want that to be our nice color
here as well may have to use that important class on it in a minute let’s
see that say that and see what happens there we go that’s correct now the text
is in the middle and it’s the correct green color and I
changed it on all of those sliders there now when it hovers I just want to change
that background to our nice blue here so let’s do that quickly we’ll do it
this way again what I’m going to do is copy that drop down one you and I’m gonna give it a hover
pseudo-class colon hover no space no space after the code on there or it
won’t work coloreds files we’re not gonna change
the color of the font so I can delete that background color I want as our blue
which is 10 CK CA I’m also gonna want that for the
border so I’m going to copy that put that in for the border color width we’re
not changing and the texture line we’re not changing so I lose those may have to tell that
it’s important we’ll see let’s save these changes back our site now when we hover over it it’s gone that
nice blue color exactly what I wanted there make sure our next slides are
gonna work yeah not what is not working let’s get rid of our spectral moment and
just do a quick reload it’s a last slide yeah that’s still the wrong color there
excuse me one more yeah so is that our first ones okay so got it go in
there override those styles are overriding our style so let’s go in here and let’s just see what happens if we
turn off custom button style it may add an icon which I do not know
which I do not want and going to this other one
and you may think this is a long way around of doing things but when we add
more buttons it’ll save us styling them because I want them all to be that color save that save that update and see what
happened was now fresh our first one was working fine a second
one sitting these arrows to speed things up he had to added that
sadly that icon you may want that yourself but I don’t particularly one
that he the colors correct but I don’t want that you we’ll just put in that color manually you you you okay good save that and update you let’s refresh and the first one we knows where I can
find second one that’s fine too so we’re good to go I believe good it’s let’s however edit your nav
links and movie menus over and how to use a bit of custom CSS on your buttons
it’s kind of a long-winded for this slider right here but every time we have
a news button down here now it’s gonna be like this it’s gonna have that hover
effect and the same dimensions which will save us time in the long run today
yo hope you found that useful if you have please like the video and subscribe
to the channel if you’re interested in web development please take one of our
web development courses below we’ve got some huge discounts for our YouTube
subscribers and there’s some great free courses down there also
once again this has been Jamie from system 22 and web design and tech tips
comm thanks for watching have a great day

Leave a Reply

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