Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • February 29, 2020 at 1:35 am #1188971
    aussiedropbear

    HI,

    I am trying to work out how to have some elements of enfold overlap layer slider.

    I can create the effect I am after using full-width slider as per the images in PC below. However I need to use Layerslider so I can have a global control point.

    I cant seem to get elements to move up and over the layerslider element like I can with your full-width slider? Is this even possible?

    Thanks
    John

    March 1, 2020 at 9:00 pm #1189257
    Mike

    Hey John,
    You can move elements up and over the layerslider with “top” & “z-index”.
    2020-03-01-134656
    Thanks for the test page, I see that it is a easy slider, do you have an example with the layerslider?

    Best regards,
    Mike

    March 2, 2020 at 6:38 am #1189350
    aussiedropbear

    Hi Mike,

    many thanks for that.

    I have created a new page for the layerslider. Link in PC.

    Is the “top” & “z-index” in layerslider or in the page elements?

    Thanks
    John

    March 2, 2020 at 12:30 pm #1189409
    Mike

    Hi,
    Thanks for the test page, Please try this code in the General Styling > Quick CSS field or in the WordPress > Customize > Additional CSS field:

    #top.page-id-1038 #layer_slider_1 {
	z-index: 0;
}
#top.page-id-1038 #after_layer_slider_1 > div > div > div > div > div {
	z-index: 99;
    position: relative;
}

    After applying the css, Please clear your browser cache and check.

    Best regards,
    Mike

    March 2, 2020 at 12:45 pm #1189412
    aussiedropbear

    Hi Mike,

    That’s perfect. Question on page ID, if I were to have this on all pages or several pages in site, how do I reference these in the code you have given? For example, I have an ‘About’ page with page-id-154.

    Also, only for mobile view, what do I adjust to have the elements sit directly under the layerslider so it does not obscure the slider images etc.?

    Cheers
    John

    March 4, 2020 at 2:51 pm #1190088
    Mike

    Hi,
    Sorry for the late reply, if you want to have this on a few pages you can add a css rule for each page-id with a comma like this:

    #top.page-id-1038 #layer_slider_1,
#top.page-id-154 #layer_slider_1,
#top.page-id-138 #layer_slider_1 {
z-index: 0;
}

    but if it is for all pages that also have the layerslider then use the class “page” without the “id”
    #top.page #layer_slider_1
    but if it is more complicated we will need to know when you will have this set up so we can figure out the best way to set up the css rules.
    If you don’t want to have the overlap on mobile devices then you can wrap your css in a media query like this:

    @media only screen and (min-width: 768px) { 
#top.page-id-1038 #layer_slider_1 {
	z-index: 0;
}
#top.page-id-1038 #after_layer_slider_1 > div > div > div > div > div {
	z-index: 99;
    position: relative;
}
}

    Best regards,
    Mike

    March 5, 2020 at 12:34 am #1190262
    aussiedropbear

    Many thanks Mike.

    I used the #top.page #layer_slider_1 which is spot on.

    Great to know the other methods as well. Very handy for future.

    You may close this thread.

    Cheers
    John

    March 6, 2020 at 12:01 pm #1190840
    Victoria

    Hi John,

    Glad you got it working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Layerslider and enfold columns overlay’ is closed to new replies.