Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #769266

    Hi There,

    I am trying to overlap the layerslider with content like the church theme. So Far I have placed the content in a color section with an ID of overlap.

    I have added the custom css below, the content is overlapping the layerslider but there is a blue section below it that I don’t want. The page is below in the private content.

    #overlap {
    z-index: 999 !important;
    margin-top: -120px !important;
    position: relative !important;
    background-color: transparent !important;
    }

    #769324

    Hey Byrne,

    As you used the blue as primary color and used the background transparent in the #overlap CSS rule, isn`t possible to remove this blue area, you just change the background transparent by the background white.

    Best regards,
    John Torvik

    #769409

    Hi John

    If I make the background color white the full width of the section is white and therefore you don’t see the overlap of the content area on the layer slider. Could you please tell me how this was achieved in the church demo.

    I have removed the color section and added a custom css class to the column called ‘overlap’ and used the following css. The yellow background is just so I can see it.

    .overlap {
    z-index: 999 !important;
    margin-top: -120px !important;
    position: relative !important;
    }

    Cheers Jane

    #769670

    Hello, similar issue to Jane’s but not working. I have a layer slider on the home page, have placed a color section (with a code block inside) below with the aim of it appearing on top of the layer slider using a negative margin value. The margin value is working but the z-index is not. I’ve tried several from the support threads but none seem to work. Here’s what I currently have in place. Have tried several of the solutions you’ve provided to others but still not working:

    #after_layer_slider_1 {
    margin-top: -300px;
    z-index: 10000;

    Here is the page I’m working on: http://jg-worldwide.com/tests/

    The z-index is the main issue, also trying to figure out if there is a way to control slides from the code block area but don’t want to press my luck.

    Thank you,
    Jay

    #769690

    Hi There,
    I managed to fix it. I removed the custom css class. Used a color section with single full width column, set column marin-top to -100px and added z-index:1 !important; to the slider custom css (under slider appearance).

    Cheers

    • This reply was modified 7 years ago by Byrne.
    #769693

    Thank you for reviewing. However, After emptying my cache the code block on http://jg-worldwide.com/tests/ is still falling behind the layer slider. Is there a way I can send a screen shot?

    Best,
    Jay

    #770119

    Hello, I may be asking for help with the wrong solution. Here’s what I’m trying to accomplish:

    I’ve created a row of HTML buttons and placed the code on a layer. I would like to link each of the buttons to a slide within the layer slider. Have spent hours trying to find what seems to be a simple solution with no luck.

    Screen shot at this link:
    http://jg-worldwide.com/wp-content/uploads/2017/03/JG-Worldwide-Home-APPROVEDx.jpg

    Appreciate your thoughts or if you can point me in the right direction.

    Best,
    Jay

    #770140

    Hey!


    @whobodyinc2
    please create a different ticket so we can be able to help you.
    That way, each one has to have the best way of us to support, so a different ticket help us really much.

    Thank you for your understanding

    Best regards,
    Basilis

    #770141

    Thanks, will do.

    Jay

    #770399

    Hi,
    Glad John was able to help, we will close this now. Thank you for using Enfold.

    Best regards,
    Mike

Viewing 10 posts - 1 through 10 (of 10 total)
  • The topic ‘Content to overlap layerslide’ is closed to new replies.