Retain 2 section separators with solid background - Z Index Issue

Support
#1

I’m trying to retain both separators for sections but I’m having an issue when both sections have a solid background applied.

The settings below are being applied to the above section. The below section is z index 1, but I tried changing it to z index 2 and it didn’t fix the issue.

This issue only started when I used the solid white background in the above section, previously it was transparent and both separators showed.

#2

Hi @dmedianik,

Your section’s separator are overlapping each other. Try to remove the separators on yoursection 2.
Add separators only to section 1 and section 3 then set the z-index of section 1 and 3 to a higher number than section 2.

If this doesn’t help, please provide us your wordpress admin login and an image of what you want it to look like.

Thanks

#3

For it to have a diagonal separator, it needs to have both the bottom separator and the top separator from the section below.

I’m trying to make it look like the image below, but the solid background is hiding it.

in section 2 to 3, the third section has a transparent background, so both separators are showing.

#4

Hi @dmedianik,

Do you want to achieve something like this?



If so, please remove the separators on your first and 3rd section. Have only the 2nd section a top and bottom separator but make sure that separators have the same color as the background (in this case a solid black), so it’ll blend nicely.

You might need extra space at the bottom of the first section, and top of the 3rd section, you can do that with a padding or a Gap element.

Hope it helps,
Cheers!

#5

That’s not what I’m trying to accomplish.

I want section 1 with solid background to show the section 2 separator.

As you can see in the picture in my second post. The separator disappears behind the background in section 1.

#6

Hi @dmedianik,

In this case, you should change the z-index of section 2 to: 4

Let us know how it goes!

#7

Thank’s Thai, I did as instructed but then the section 1 bottom separator and the section 3 top separator are hidden.

#8

Hello @dmedianik,

The separator depends on the z-indexes of the section. No matter what you do, only the separator of the section with the highest z-index will display. I would recommend that you insert another section in between your section. In this new section, this is where you place the top and bottom separator so that both of the separators will show up.

Hope this make sense.

#9

That’s a good idea, I didn’t think of that.

Is this the only way we can think of accomplishing this diagonal bar look?

Is there a way to target the z-index separately from the section?

Also what would be the best way to vertically center a headline element based on a columns height?

#10

Hello @dmedianik,

Even if you target each separator trying to increase their respective z-indexes, it will still not work because they are contain in different sections with different z-indexes.

If you want to vertically center the headline, you will have to enable the “Marginless Column” option in the row settings and then insert an inline element css in the column vertical-align: middle;

Hope this helps. Please let us know how it goes.

#11

I applied the css in the column however it didn’t seem to affect the content.

Column is set to marginless in row settings. CSS was applied in column css

#12

Hi @dmedianik,

You have added vertical-align:middle to Theme Options > CSS

Please add this CSS to your column’s CSS,

$el {
vertical-align:middle;
}

Thanks!

#13

I followed those instructions Rad, however it didn’t work.

I added the CSS exactly to where you pointed me to, and the previous css was also added there, not my themes CSS. So if you see it there, it seems like there’s a glitch.

I previously included the link to the website and login details.

#14

Hi @dmedianik,

I checked and it’s overwritten by another CSS, for that, you’ll have to add !important; . Please change it to this

$el {
vertical-align:middle !important;
}

It should work, directly tested but I should let you re-apply it :slight_smile:

Thanks!

#15

Thank you Rad, this worked for me :slight_smile:

#16

You’re welcome.

#17

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.