Overlay navbar on Carousel slider in Materialize css


Now the next challenge is, we have to overlay
this menu bar on top of this particular slider holder here. So, in that essence, let’s get back to stylesheet.css
and here we can see that this is the menu-holder, this is the slider-holder,
and this is the main-wrapper which is practically wrapping both this slider and this menu bar
into it. So in that essence the very first thing that
we need to do, in order to gain some overlayed condition, we have to change the z-index
property of all those things those been used over here. So in that essence the very first thing that
we are going to do, we are going to make this slider-holder into an absolute position
and in that very case if we wish to use some absolute condition into our project, we have
to define the parent block element with a position of
relative. So that is why in this main-wrapper, we are
keeping this position as relative; this is the first case. Why main-wrapper? because it is practically
wrapping each and every element like this menu-holder, this is the main child element
to this particular main-wrapper; and another child-element is this slider-holder. So main-wrapper is the parent holder, menu-holder
is the first child element and the slider-holder is the second child element.
and all we are doing here we are lifting this slider-holder div on or over; not over practically
below and this menu-holder item, it is practically going to be overlayed on this particular slider-holder. That is what we are about to do into our stylesheet.css. So we have kept the parent element with the
position of relative, and now into this particular slider-holder element, we are putting this
position as absolute. There it goes. And we are mentioning that it will leave 0px
from top; that means it won’t be leaving any kind of margin from the top. This is the second case. Now if we leave it up to this far and if
we get back to our project and reload; we will see that this will be result, which is
not the exact desired one; the menu-holder is right now beneath this slider-holder block
level element. So this is what we need to
change right now. In that order, all we are going to do; we
are going to put a z-index to -1; and we are going to lift the z-index of this menu-holder
item to some value; for say 9999. Now if we press CTRL + S, get back
to our project and reload, now we can see that actually the menu bar item, it is all
over this individual slider-holder panel. And, we can see that both the slider-holder
and the menu bar, both of them are practically working. Now press CTRL + SHIFT + M for Firfox browsers;
first of all put it back to 480px, this is the best resolution, reverse it; and you can
see that the slider panel it is practically working and there’s practically no problem
with this slider-panel. So everything is right back into its position. It is practically doing the best fit thing
into our project. So we can say that we have successfully placed
the menu-holder above this particular slider-holder but there’s another
problem. We can see that already the h2 tag that was
used over here it is now disappeared under this particular menu-holder right into it. So this tag is practically lying beneath this
menu-holder; now we have to rectify this problem too. so all we need to do we need to press F12;
then we need to select this particular p tag and we can see that this is the h2 tag which
is lying beneath this menu-holder. So we need to get back to it and we can see
that this is the h2 tag which is been used over here and it is using a margin of 2.33rem. So what if we put a line-height here, for
say, 5rem…. Now we can see that this particular h2 tag,
it is now resurfacing from the below, from the bottom of this particular menu-holder
block-level element. So in
that essence we need to change the line-height of this h2 tag which is been used with this
particular slider-holder right over here, and we need to change it a little bit more. So instead olf 5rem if we put here 7rem, we
can see that everything is right back into the
position. There it goes; everything is proper in order,
So all we need to do now, let’s get back to our project and here we are modifying the
line height of this carousel-slider which in turn is lying into this slider-holder block-level
element. So that is why we need to get back to our
text-editor and here we will be wishing to mention as… h2 which is under this slider-holder. So, there it goes; slider-holder h2, and we
have changed the line-height. Sorry, this isnot line4 height; this line-height,
printing mistake I guess…7rem, important; there it goes. Press ctrl + s,
get back to your project and.. we can see that we have successfully changed the line-height
of this h2 tag that we are working with right over here and everything is back into its
position. So, if we press ctrl + shift + m, reload,
there it goes, and we can see that there’s absolutely no problem
with the slider, with the menu bar and any other components those are present right into
the slider-holder or into the menu-holder item. So, everything is fine and the slider panel,
it is practically closing in, or it practically closes off; whatever we wish to do with it. Each and every components
those are practically right now working as it should have been. So we have successfully implemented the menu-holder
over our slider-holder element. And if we wish to change the color of the
menu-holder then there’s absolutely no problem with it. All we need to do we need to get back into
our project and we may use…if we use it over here with this
menu-holder – teal – reload. No it won’t be working. So let’s find out which class is responsible
for this color change here. div class nav-wrapper…nav… so this is
the background color…so this is the class which is practically responsible for this
background color. Hence we need to copy this class from here;
get back to your project and into this stylesheet.css…put the nav class…the background color here
should be, for say, transparent. So, this is the background color of transparent
to this particular class nav and on the other hand in this index.html we have used this
class name of teal along with the menu-holder item, the child item that we have created
into our project. Now let’s get back to our project; first of
all close this code inspector panel and reload; it is not working; no problem…. So this is the component that we need to change
right over here. We have set it’s background to transparent.
and this is the menu-holder teal item that we created over here; we have practically
used this teal class with this particular class of menu-holder. and this is what the
exact result will be. So we can see that everything is right now
into its location, into its position; everything is right into order. We have successfully created the slider panel
and the menu bar component and we have placed them over here and one over another. In the next case all we are going to do, we
are going to create; make it a desktop preview; we are about to create this particular segment
here which practically uses all those Google icons with
it and we are going to use some kind of grid sections right over here. We would like to ask you to not to forget
to subscribe us, and do not forget to hit that particular bell icon in an order to stay
connected with us. Thank you for watching this video; see you
in our next tutorial. Till then, bye.

2 Comments

Add a Comment

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