Color Section to overlap LayerSlider

Sure. No problem Rikkard. The site is not public as of yet; so, you will need to login with the admin login credentials provided below.

As you can see on the welcome page, the image underneath of the LayerSlider is moved up, as it should be, but it’s still covered by the LayerSlider. And this is despite having used a Z index of 10000 along with !important.

Many thanks for looking into that.

Best,

Karl

Thanks Rikard. That works. You rock!

Karl

Hello Rikard,

I was just trying to duplicate the effect with the Color Section overlapping the Layer Slider on a secondary page, but I keep running into the same problem with Layer Slider covering the content of the color section.

I already created another class (because the negative margin will be greater for that color section) and I tried modifying the code you supplied above, but to no avail. :-(

So, how would I need to go about modifying the z-index of this Layer Slider, let’s say on the services page I just created? And, in addition to that, on other secondary pages?

Many thanks for looking into that again. I sincerely appreciate it.

Best,

Thanks Rikard,

I see what you are saying.

So, knowing now that all Layer Sliders seemingly all have the same global id (#layer_slider_1), I followed your lead and went with:

#layer_slider_1 {
z-index:0;
}

Following this rational, this should apply a z-index:0 to all Layer Sliders?

So, as far as this concerns my welcome page, working with

#slideroverlap {
padding-top: 0;
margin-top: -100px;
z-index: 10000 !important;
}

is working just fine.

Now here is what I’m struggling with: On secondary pages, such as services, legal, etc. I’m using another smaller Layer Slider with a canvas height of only 400px. Now applying the following code

#slideroverlap_2 {
padding-top: 0;
margin-top: -200px;
z-index: 10000 !important;
}

won’t do anything. If I increase the negative top margin to -300px, it would create the desired effect; however, since, it’s a response site layout, it will cause the Color Section below to move up almost to same level as the main menu.

Why is that? Since the the Color Section below has no padding applied, shouldn’t any negative margin cause the Color Section to overlap Layer Slider. Why is that working perfectly on the index page and here it doesn’t?

Many thanks for helping me get through this. It’s vital to my overall design and layout; so, I appreciate your help and patience with me.

Best,

Thanks for babysitting this issue and helping to find a solution.

As a matter of fact, you have been looking at the wrong color section.

The color section I want to overlap layer slider is the one right underneath of the layer slider on the services page. You can see it already has the slideroverlap_2 class assigned to it. You can find the corresponding styling in the Quick CSS section of the Enfold General Styling section.

The effect I’m trying to achieve is the exact same as on the welcome page – with the only distinction that the negative margin on the services page and all other secondary pages should be -200px.

Simply put, I want the color section (slideroverlap_2) on the services page to overlap layer slider by -200px (link). It’s already working, if the page is viewed on a smaller screen size, but on larger screens it’s off and positioned below. It’s driving me crazy because none of these issues occur on the welcome page. It’s the exact same effect I want to achieve – just with a larger negative margin – on secondary pages.

I hope this makes it clearer now. Again, many thanks for looking into this.

Just a quick note to let you know that working with a percentage-based negative top margin did do the trick for me, Rikard.

Many thanks for that.

Thanks for looking into this Victoria: I appreciate it.

I checked the login credentials and they seem to work. As you can see from previous responses from Rikard, he was able to login as well. Either way, the issue has been resolved in the mean time.

Many thanks again.