HomeArticlesOverlay navbar on Carousel slider in Materialize css Overlay navbar on Carousel slider in Materialize css By Juan Cameron February 14, 2020 Articles, Blog 2 Comments 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. Tags:and, css, material design, materialize css crash course, materialize css navbar, materialize css navbar mobile, materialize css navigation bar, materialize css responsive navbar, materialize css sidenav, materialize css sidenav tutorial, materialize responsive navbar, materialize slider responsive, menu responsive materialize, overlaying menu on carousel slider in materialize, the, this, tutorial Related Posts BIAS AMP 2 Plugin – METAL Ad Networks – Web Development HTML тэги. Начало. Классификация тэгов. (Блочные / Строчные / Парные / Одиночные) About Author admin 2 Comments Success Education September 13, 2019 This video brought me tooo helpful THANKYOU Reply scripteaze December 21, 2019 Thank you, i've been looking for this! Reply Add a Comment Cancel reply Your email address will not be published. Required fields are marked *Comment:*Name:* Email Address:* Save my name, email, and website in this browser for the next time I comment.