Z-index and Theme Global Size Width
Hello
I'm having difficulty understanding how to assign z-index to a custom menu I created, when I bring in a row that has a revolution slider, the new row is layered on top of the the custom menu and doesn't seem to keep it's width properly. these are in two separate blocks and each is placed in it's own a row. The site is in Boxed mode so each row is set in General to Row stretched
If I move the row up using a negative margin I overlap the custom menu. I must be doing something wrong here, or if there is a way to assign a row a z-index I would keep it on top of the row containing the revo-slider.
https://advantagetitlewp.wpcomstaging.com/
my Revo-slider's layout is set to the same width as the Theme Options Global Site-Width 1220px, it's also confusing because I've built some other Revo - sliders that sit properly on other pages. I am going to try using a new Revo- slider because there might be something I haven't checked to lock this width correctly? And so I think if I am able to adjust the z-index of the custom menu block I can move the padding and margins to match the rest of the pages. Does the z-index need a CSS tag?
thanks
Phill
Comments
Hello,
As I see, the white strips on left and right appears only on tablet/mobile, please use this CSS code:
@media only screen and (max-width: 767px){ .content_wrapper .section_wrapper{ padding-left:0px !important; padding-right:0px !important; } }thanks
After adding the Revo-slider to the same block as the custom menu I am getting the proper width. I'm just not understanding the margins and padding here.
so I guess my main question in this discussion would be on z-index, sorry for the confusion.
Thank you so much! I'll give it a shot.
Any tags for z-index? I have a block that always slips under the the block above it, and i would like it to overlap when I move it up.
Which one is it? Can you show me it on screenshot?
thanks
Hello Pablo,
It's on a new page https://advantagetitlewp.wpcomstaging.com/underwriters-2/
whenever I move B up it slips under A - I've been able to move my blocks around but I'm just not understanding the margin and padding, because in other pages I am able to align blocks using 0px margins on the bottom and a 0px margin on the top.
I'm also having trouble with using the navigation menu tool in appearance - whenever I create a new nav menu it is displayed vertically instead of horizontally and I am noticing that there must be some CSS code that is forcing it to be the color green.
I do have other menus that are working correctly and i am using those but if I try and make a new one, it always makes it vertical.
It's difficult to try and edit a site that was built by someone else, that person left the company and never told us or showed us how he was creating any of this site. I wound up editing the entire site using WPBakery and then learning great deal with the help from Phil and the support team of both Muffin as well as Revolution Slider.
Thank you for all your help, I wouldn't be working here if it wasn't for your answers.
Many of my issues happened when the company wanted me to change the site to be in BOXED mode.
https://advantagetitlewp.wpcomstaging.com/underwriters-2/
I am still having a problem with the width of my sliders not obeying the Row command - stretch Row and content, for example it works when the slider is in the same block as illustrated in - A -
then B shows about a 5px margin that stretch Row and content command will not fix.
here is the Backend Editor where A works and B leaves the 5px
Any help at this point would be greatly appreciated.
Well the z-index and margins of WPBakery are very odd things, a lot of things are hardcoded in that page builder and in my opinion are not user friendly - we strongly suggest to use the BeBuilder, its much faster, has lot of better functionalities and its really powerful, also WPBakery does support all of supports from the BeTheme.
But, to get back to the question:
First image:
Can you leave that page, when the "B" content is under the "A"? It will be much better to create a CSS code for me.
Second image:
Am I able to see somewhere? Are you using the Header Builder?
Third, fourth image:
This is what I mentioned previously, typical issue from WPBakery that cannot be solved without CSS code, the stretch option is not working as it should.
Please paste that CSS code into Theme Options -> Custom CSS & JS -> CSS
.vc_column_container > .vc_column-inner.vc_custom_1663003497204{ padding:0 !important; margin:0 !important; }thanks
ok, thanks Pablo,
this is the page that is giving me a bit of trouble, it hasn't been approved so these spacing and margin issues aren't critical for now, I'm just trying to understand what I'm working on.
I've found that the stretch content option works most of the time, just depends on the block in which the element is located in. (most of the times). I am using it throughout my site since I was asked to switch the site to boxed mode. Also I am not using header builder, I was told to lock the header using the Fixed BeTheme theme option, they didn't like the way sticky header was looking when scrolling down.
Thanks again for checking this out, I inherited this site from a previous employee, I had to edit what was already created and that's why I was using WPBakery, I wasn't able to figure out how to edit the pages in Bebuilder so I will have to start from the beginning and learn BeBuilder on a new project.
I also found the CSS to repair my vertical menu issue, so please disregard the menu part of the question.
Glad to hear that you will use the BeBuilder, if you have some questions, feel free to ask.
About the WPBakery issues, well, I didn't see the menu problems, so I think that problem is with overlapping content.
Please use this CSS code:
.vc_custom_1663093023550{top:-15px !important; background:#fff;}thanks