April 6, 2020
Divi theme eCommerce tutorial Change Menu Background on Scroll

Divi theme eCommerce tutorial Change Menu Background on Scroll


hi guys and welcome to another divi
ecommerce site build this is Jamie from system 22 and web designer tech tips
comm in this series of videos we’re gonna be putting together this online
store or e-commerce site with the Divi theme from elegant themes if you don’t
have it you can download it from a link below it is a premium template so you’ll
need to pay for it and you can use my affiliate link below but if you don’t
want to just go to elegant themes calm and you can get it straight from their
site if you build WordPress sites though I would recommend this theme it is so
versatile and easy to use okay this is where we left off in our last video I’m
gonna be changing all this down here but for the time being let’s put in a
secondary menu at the top let’s use our primary blue color that we’ve been using
here for it and let’s when this Scrolls it turns select sort of purpley color
and shrinks a bit okay but I think I want mine to stay perhaps
white and not to shrink quite so much when it when we do scroll so let’s get
that organized so let’s go to our dashboard first thing we need to create
some menus I’m just gonna create some generic menus we’ll change these later
on when we’ve got actual pages we want to add so let’s just create a new menu hit the create new menu link up the top
here or give it a name and I’ll just call it main test because we will be
changing this I don’t know if I’ll use it I’ll create another one so hit create
menu button and let’s just add the pages I want to add to this we’ll go that’s
fine right now I don’t want to add the sample page selected those and I’m gonna
add them to the menu there we are we’ve just got five items in there we’ll save
that now we want to go to our Divi theme customizer we go down a Divi and theme
customizer you you okay once our customized is loaded we
want to change a couple of things here when we scroll that’s shrinking down and
it’s turning to this bluey purple color which is okay but I want mine to be just
slightly off-white and also I don’t want it to actually shrink down when that
happens I wanted to stay the same height so if we go to header and navigation
look at our primary menu bar and at the moment the height is 70 so what I want
if we go back is to go down to fixed navigation settings and I want to put
the fixed menu height to 70 you can use your slider or you can just type in the
amount like I’ve done there now when I scroll that shouldn’t change height it
will still change color though there we go it’s staying the same height now
let’s change the color I want it to be white well pretty much white I’m just
slightly off-white let’s say no that’s pretty much white but it’s just slightly
off of white so now when I scroll that should turn white which that’s gonna
work for me on these pages here it really does
a lot of difference but on the checkout and car pages this will make a
difference because you don’t want that being transparent for them because when
you scroll up if I just demonstrate while bringing that down you can have
all this stuff you’re not going to be able to read that menu because of that
so let’s take that back up and check it’s working
yep I’m happy with that that’s fine so let’s publish that and next thing I want
to do is I want to add that little menu that I put in here so we’ve got not
quite as many items obviously we’re going to change this later when we’ve
got more pages and to do that we want to go back and go down to menus or locations here primary menu I want to
put that new one in main test you
so now let’s shrink down to less items and I don’t want to include the search
bar on that so if we go back and back again header elements
just uncheck the show show search but there and that gets rid of that little
search icon there now this menu I’m probably gonna have it aligned over here
we’ll do that in a little while what I want to do next is add secondly when you
above this will have it this blue color here let’s go back to mainly use location secondary menu all I
need to do is put that one in there as well and it’ll appear at the top here there we go and it’s the wrong color so
I want to make it this color right here plus I’m going to customize it and make
it larger and have the texts probably align left’ not sure yet let’s go back and back again now let’s
go to our header and navigation then to our secondary menu bar now here I want
to put in the blue that I’ve been using which is that 10c ACA color leave the phone as it is and let’s just say that I actually before we do let’s make that
font size a little bigger make it say 60 very clear when people are using it I mean we could actually make that
background-color:transparent and the text blue like the other one but
we’ll have to change that on other pages let’s just play this the text color ten CAC a there we go that’s legible but
again like I said I’m gonna have it over here somewhere or perhaps central when
we scroll its remaining see through there which is kind of interesting I
think we’ll we’ll make it the same color as that let’s publish that you can
always change this as a later date I go down there are fixed navigation settings you check this is gonna work yeah let’s turn
it green so let’s make it the same color as our other one which was just slightly
off-white wasn’t it they’re both the same color there and
again like I say I’m going to change these slightly so that’s more probably
in the middle and I’m gonna make those over to left too so we’ll do that in
another video because this one’s rolling on a bit here I’m just gonna make those
slightly bigger stay in line with those I’ll make those 16 let’s go back to our
primary and text size of Maine at 60 okay let’s publish that and exit you let’s go back and refresh our page there we go now what I’m gonna do in the
next video is I’m gonna move these over I’m gonna customize the link color and
the hover effect and we’ll move this over so you can see it better so I hope
you found that useful if you have please like subscribe and share our videos if
you’re interested in web design please take one of our web design courses below
we’ve got some huge discounts for our YouTube viewers there’s also some great
free courses down there so take a look 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 *