Viewing 17 posts - 1 through 17 (of 17 total)
  • Author
    Posts
  • January 11, 2021 at 5:12 pm #1271648
    steviger

    Hi,

    I’s like to have a 1/3 column to verical overlap the Layerslider (Please see the desired result here). For that reason I gave a 1/3 column a class: “whitesubmenu_overlap” with the following CSS:

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

    But somehow it doesn’t work. Could you help me out?

    Best regards,

    Steven

    January 11, 2021 at 5:44 pm #1271661
    Guenni007

    simple way : give a custom-class to the column that should shift up f.e.: shift-up
    https://webers-testseite.de/steviger/
    then insert this to your quick css:

    
@media (min-width:768px) {
  .flex_column.shift-up {
    position: relative;
    top: -150px;
  }
}

    if you have on top an advanced layerslider – it maybe necessary to give a higher z-index to that container.
    And you can use the animations on that columns as you see in the example pages.

    or use the flexbox model:
    maybe this helps you : https://webers-testseite.de/overlap-to-followed-section/

    January 11, 2021 at 6:08 pm #1271667
    Guenni007

    if it is a menu – as you said above – it might be usefull to set the reverse order to the columns on mobile view.

    Then give a custom-class to the color-section f.e: reverse-order
    and put this to quick css:

    .reverse-order .entry-content-wrapper {
    display: flex;
    flex-flow: row wrap-reverse;
}

    ps : do only that content to your color-section and other content to the next one.
    See what happens on mobile view.

    January 11, 2021 at 6:30 pm #1271671
    steviger

    Hi Günter,

    Thanks for your extensive answer. To be honest I think it is a matter of z-index in combination with Layerslider and 1/3 column.
    With my CSS rule it does shift up 90px but it shifts under the Layerslider.

    Although on your page it seems to work ;)

    Please see PC.

    Best regards,

    Steven

    January 11, 2021 at 10:32 pm #1271702
    Guenni007

    by the way: no PC for PartiCipant

    just a moment – i will place a layerslider to see what we can do:
    just give to the color-section a z-index and a relative position ( on my end the layerslider got 35 ) so :

    .reverse-order {
    z-index: 50;
    position: relative;
}

    see example-page: https://webers-testseite.de/steviger/

    • This reply was modified 3 years, 10 months ago by Guenni007.
    January 12, 2021 at 4:06 pm #1271929
    steviger

    Hi,

    Thanks again for help with this issue. With PC I meant Private Content btw ;)

    I’m kinda lost. Please see screendump with my settings. I tried to fiddle with z-index etc. but no luck. Funny thing is that it does work on your testsite ….

    • Your layerslider doesn’t seem to have a custom class right?
    • Your color section has the class: reverse-order<div id=”av_section_1″ class=”avia-section main_color avia-section-large avia-no-border-styling avia-bg-style-scroll avia-builder-el-1 el_after_av_layerslider avia-builder-el-last reverse-order container_wrap fullsize” style=” “>
    • The 1/3 column has class:shift-to-top with position relative, top -150px and a box-shadow

    The only alternative option I get to work is:
    1. Give the complete color section a negative margin to overlap the slider
    2. Give the 2/3 column on the left an positive margin so that it’s positioned below the slider while the 1/3 column stays on top of the slider.

    But that’s quite cumbersome (umständlich) I recon.

    We want to hide the submenu on mobile view so that’s not a CSS issue (just display:none;)

    Thanks again for your time and effort!

    Best regards,

    Steven

    January 12, 2021 at 11:14 pm #1271992
    Guenni007

    yes i know – and because i’m paricipant only – i do not see your Private Content

    please send me your link to the page – if you can not make it public – inform me via e-Mail
    The nick or avatar has info about my contact

    PS: maybe you only had to set some rules to !important f.e. the relative positioning of the color-section.

    January 13, 2021 at 10:56 am #1272102
    steviger

    Ah, I see ….

    Just send you a mail.

    Regards,

    Steven

    January 14, 2021 at 1:13 pm #1272388
    Guenni007

    ok – it is in spam folder – i will look now …

    edit:
    i prefer the top instead of margin-top – but that is ok too.
    you decided to have on mobile the display : none of the overlapping column.

    the point is that an overflow is set to hidden – try:

    .avia-section.reverse-order .post-entry {
  overflow: visible;
}

    maybe you had to set this to !important – but i guess it will work this way – without that.

    ________

    if you decide to show it on mobile and have this in addition in your css:

    .avia-section.reverse-order .entry-content-wrapper {
    display: flex;
    flex-flow: row wrap-reverse;
}

    it will end up in :

    January 14, 2021 at 2:31 pm #1272407
    steviger

    Hi,

    Thanks again for your effort and support! The overflow: visible; rule was the thing that made it happen!

    Stay safe!

    Best regards,

    Steven

    January 14, 2021 at 5:30 pm #1272475
    steviger

    Sorry, was to soon. It does work together with a full width slider but not when using a layerslider.

    Please see your e-mail box for preview :)

    Otherwise I’ll use my alternative option:
    1. Give the complete color section a negative margin to overlap the slider
    2. Give the 2/3 column on the left an positive margin so that it’s positioned below the slider while the 1/3 column stays on top of the slider.

    Best regards,

    Steven

    January 16, 2021 at 1:49 am #1272844
    Guenni007

    that on the test-page is an advanced layer slider:
    https://webers-testseite.de/steviger/

    you had to set the section to a higher z-index as the layerslider (30)

    .avia-section.reverse-order {
    z-index: 35;
    position: relative;
}
    • This reply was modified 3 years, 10 months ago by Guenni007.
    January 16, 2021 at 10:42 am #1272912
    Rikard

    Hi,

    Thanks for helping out @guenni007, did you get everything working as it should @steviger?

    Best regards,
    Rikard

    January 18, 2021 at 12:09 pm #1273310
    steviger

    Hi,

    Please see the current settings in the screendump. I doesn’t work on my side and apparently some (CSS) rule somewhere else prevents it to work.
    Thanks again for your time and effort. I’ll go for my alternative option in order to save time ;)

    Best regards,

    Steven

    EDIT:
    I figured out that, when using .container_wrap {z-index: 1;} it does work ….

    Regards,

    Steven

    January 19, 2021 at 1:12 pm #1273690
    Rikard

    Hi Steven,

    Thanks for the update. So things are working as they should now then?

    Best regards,
    Rikard

    January 20, 2021 at 10:54 am #1273970
    steviger

    Hi Rikard,

    Yep, thanks to Guenni007!

    Best regards,

    Steven

    January 20, 2021 at 8:01 pm #1274175
    Victoria

    Hi Steven,

    Glad you got it working for you with Guenni007’s help! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

  • Author
    Posts
Viewing 17 posts - 1 through 17 (of 17 total)
  • You must be logged in to reply to this topic.