Section prioritizing (z-index does not work) - Support | Kriesi.at

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
February 11, 2019 at 1:45 pm #1065418

ilogicltd
Participant

Hello, is there a way to prioritize one top section over the bottom one? For example here https://prnt.sc/mag8p4 I want to put a negative margin on the section with icons so that background can overlap with the section below. Thanks.

This is the answer that I got from you on ThemeForest:
“Hi,
Yes, that is possible. You can simply edit your column element and give it a negative top margin value. An example can be seen here – https://kriesi.at/themes/enfold-medical/.
Let us know if you have any other questions :)
Regards, Yigit”

My answer was:
“No, that does not work, and that is the reason why I posted the question actually. The bottom section has a higher hierarchy than the top one. It works fine when I want to overlap to the top section, but I need to do so with the section below as well, see the screenshot. https://prnt.sc/mb4nvs” and a couple of follow-ups.

Can you help with this?

February 13, 2019 at 5:21 am #1066244
Ismael
Moderator
Hey ilogicltd,

Thank you for using Enfold.

In that case, you have to specify the stack order of the sections manually.
```
div#av_section_5 {
    margin-top: -50px;
    z-index: 1;
    position: relative;
}

div#av_section_4 {
    z-index: 3;
    position: relative;
}
```
Right now, we are using default selectors (#av_section_5, #av_section_4) of the color sections, but you can change that by filling in the Section ID field.

More info about the Section ID and the color section as a whole: https://kriesi.at/documentation/enfold/color-section/#color-section-with-100-content-width

Best regards,
Ismael
February 13, 2019 at 9:58 am #1066360

ilogicltd
Participant

That worked.
Thanks.

February 13, 2019 at 10:09 am #1066366

Guenni007
Participant

https://kriesi.at/themes/enfold-medical/#av-layout-grid-3

So this is not true: you see on your example page that #av_section_2 is over #av-layout-grid-3
and this is the avia-builder-el-last element

February 14, 2019 at 4:36 am #1066766

Ismael
Moderator

Hi,

@ilogicltd: Glad it worked. Let us know if you need anything else.

@Guenni007: I’m not sure I fully understand that. Could you explain it further?

Best regards,
Ismael

February 14, 2019 at 12:40 pm #1066931

Guenni007
Participant

Aha sorry then i believe i miss-understand his request. But then the mention of the demo page was misleading.
He wants to overlap a container downwards.

February 14, 2019 at 2:03 pm #1066964
Guenni007
Participant
so what would i do
see here: https://webers-testseite.de/overlap-to-followed-section/

Color-Section can grow with the content – downshift is still at the same value
On small screens everything works as before.
You can shift each column as you like – even the one over the top
- give the custom-class to color-section: overlap
- give to the column to shift upwards the custom-class: shift-up
- give to the column to shift downwards the custom-class: shift-down
- add this to quick css:
```
@media (min-width:768px) {
	.overlap .entry-content-wrapper {
	  display: flex;
	  justify-content:space-around;
	  align-items: flex-start;
	}

	.flex_column.shift-up {
	    top: -100px;
	    align-self: flex-start;
	}

	.flex_column.shift-down1 {
	    bottom: -150px;
	    align-self: flex-end;
	}

	.flex_column.shift-down2 {
	    bottom: -100px;
	    align-self: flex-end;
	}
}
```
February 18, 2019 at 6:45 am #1068142

Ismael
Moderator

Hi,

Thanks for the follow up. Looks useful.

Now, regarding the portfolio, I can’t reproduce the issue because the “load more” button is not working properly. Is it working in your end? Please continue on the other thread.

// https://kriesi.at/support/topic/portfolio-grid-problem/#post-1066355

Best regards,
Ismael
Author

Posts

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.