so now it works – but now you have to remove the screen rules for those sliders – because on ipad 768px no slider is seen.
the padding and navigation we will adjust after that.

no i see that you are taking the one and shift it over the header – but these two functions are working a little on the same thing.
But the one is waiting til the document is ready – so the other one could not do what it has to do.

Try this : Backup your child-theme functions.php.
Then delete both rules – mine and the one that insertBefore Header rule
i mean this one here:

(function($){
    $(document).ready(function($){
        var is_mobile=false;
        if($('.responsive #scroll-top-link').css('display')=='none'){is_mobile=true;}
        if(!is_mobile){$("#main > .avia-fullscreen-slider").insertBefore("#header");}
    });
})(jQuery);

and insert instead this one

function only_one_slider(){
if( is_page(2) ) {  
?>
<script>
(function($){
    $(document).ready(function(){
        $('html.avia_mobile #fullscreen_slider_1').remove();
        $('html.responsive.avia_mobile #scroll-top-link').css( "display", "none");
        $('html.avia_desktop #full_slider_1').remove();
        $('html.avia_desktop #fullscreen_slider_1').insertBefore("#header");
    });    
})(jQuery);
</script>
<?php
}
}
add_action('wp_footer', 'only_one_slider');

we will see then if it works.

ok – now i got it.
first – there is over the header a full-screen slider too! Did you insert this via functions.php? – and a header widget?

Edit: ok i see the insertBefore on your functions.php

maybe put my code above too in a document ready option:

function only_one_slider(){
if( is_page(2) ) {  
?>
<script>
(function($){
    $(document).ready(function(){
        $('html.avia_mobile #fullscreen_slider_1').remove();
        $('html.avia_desktop #full_slider_1').remove();
    });    
})(jQuery);
</script>
<?php
}
}
add_action('wp_footer', 'only_one_slider');

and we see then whats happening

so you got a 1/1 container – and that should be the sticky container – but what isn’t sticky then besides it?
Show me what you’re up to with a sketch.

Or is it that behavior you like to have ( see sub-menu) : https://kriesi.at/themes/enfold-2017/elements/sub-menus/

you can not insert a section!
a [av_section] is a color-section – and that you can’t insert into a header container.

try this and look if it works – it is only one centered button:

add_action('ava_main_header', function() {
echo do_shortcode("[av_one_full first  margin='0px'  row_boxshadow_width='10' padding='0px' column_boxshadow_width='10' background='bg_color'  background_position='top left'][av_button label='seems to work' link='manually,# your homepage' link_target='' size='medium' position='center'  icon_select='yes-right-icon' icon_hover='aviaTBicon_hover' icon='ue812' font='entypo-fontello' color='theme-color' custom_bg='#444444' custom_font='#ffffff'][/av_one_full]");
});

after that replace that function and see where the inserted goes to:

add_action('ava_after_main_menu', function() {
echo do_shortcode("[av_one_full first  margin='0px'  row_boxshadow_width='10' padding='0px' column_boxshadow_width='10' background='bg_color'  background_position='top left'][av_button label='seems to work' link='manually,# your homepage' link_target='' size='medium' position='center'  icon_select='yes-right-icon' icon_hover='aviaTBicon_hover' icon='ue812' font='entypo-fontello' color='theme-color' custom_bg='#444444' custom_font='#ffffff'][/av_one_full]");
});

Yes Nikko an please report on how to do it with a child-theme header solution. I got this trouble on some pages too, that the fixed sub-menu is on load not visible

i think this is one reason Kriesi does not have overflow-y: hidden on html when lightbox is open.
maybe you take better ismaels advice to completely overlay the background – so you don’t see if it is scrolling or not.
Or work a lot with fixed positioning.

This way: without the overflow-y snippet

/*** these next two rules seems to be obsolete now  - tests are still running****/
.mfp-zoom-out-cur {
    height: 2000vh;
    overflow: hidden;
}

.mfp-bg {
    height: 2000vh !important;
}

try first only with these rules :

.mfp-zoom-in.mfp-ready.mfp-bg, .mfp-zoom-in.mfp-ready .mfp-preloader {
    opacity: 0.8;
}

.mfp-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  overflow: hidden;
}

.mfp-arrow {
  position: fixed
}

.mfp-wrap + #wrap_all {
  position: fixed
}

img.mfp-img {
  max-width: 70vw;    /*** 80vw still works   ***/
  padding: 10px 0 !important;   /*** i would do a padding here - looks nicer ***/
}

guess this is an elegant method – and it works with all browser i guess
maybe we had to put it in media query only for desktop browsers – i had to look what happens to mobile devices.

• This reply was modified 6 years, 3 months ago by Guenni007.

the 150% belongs to the surrounding container. So if header-height was first set to 100px then 150% is a max-height of: 150px.
on his own website there is a header-height of 64px – so 150% are 96px.

the overflow: visible end up in a logo that is bigger than its surrounding container and is visible over it.
So thats my comment – it depends on header-height.

So for shrinking headers the height in relative Values is important. The max-height is the starting point.

https://webers-testseite.de/cynthia/unite4-2/
my header there is set to 160px
because i want to start with a logo img height of 350px. the The height must be set to: 350:160 = 219%

this is a hard to find a device independent solution.
with the above code it has the negativ jumping scrollbar issue on MAC

I can look at your page on 3 browsers here under Mac.
In none of them the problem is there!

In Enfold you have set the slight magnification effect on the images in hover – that doesn’t cause the page to “jump” for me either. – I know the phenomenon from before, but I haven’t seen it for a long time.

Where do you look at your pages in IE10 or Edge? and PC / Windows10 …
Aha – now i’m on my PC and there it is. Maybe a margin-right will do the trick on PC

try instead :

add_action('wp_footer', 'no_background_scroll_on_lightbox_open');
function no_background_scroll_on_lightbox_open(){
?>
<script type="text/javascript">
(function($) {
    function a() {
      $('body').on('click', '.lightbox-added', function() {
        if($('.mfp-bg').length >= 1) {
          $('html').css({
          "overflow-y": "hidden",
          "margin-right": "17px",
          });
        } 
      });
      
      $('body').on('click', function() {
        setTimeout( function() {
          if($('.mfp-bg').length == 0) { 
            $('html').css({
			  "overflow-y": "scroll",
			  "margin-right": "0px",
          });
          }
        },500);   
      });
    }
  a(); 
})(jQuery);
</script>
<?php
}

• This reply was modified 6 years, 3 months ago by Guenni007.

thanks –
when does the problem come up for you?
with the lightbox open – or when the lightbox is closed?

With the lightbox open – it’s the way I want it: the background doesn’t scroll away – there is no scrollbar visible on the right.

When the lightbox is closed : I have to scroll down to get to the content – then the scrollbar appears.
But that depends on the browser too! Firefox does not show it on scrolling – chrome does – safari too.
You can always have the scrollbar displayed regardless of whether a content is smaller or larger than the page height.

only moderators can see private content – so wait til mods are here. Sorry without the page i could not help you

i have to see the site – to give you better instructions.
the scrollbars in the lightbox should not be affected – how would you show then all the content if it is bigger than lightbox window.
the scrollbar in the background is gone on opended lightbox by that code above ( overflow-y : hidden) – on closing the lightbox it must be there.
see website in iframe f.e: https://webers-testseite.de/my-website/

Off topic – by the way Ismael: it maybe a nice thing if the “read-more” ($permalink) button will not be part of the excerpt. Because f.e. on influencing the_excerpt length the read-more link is cut-off.

_________

PS : i tried that on single.php and single-portfolio.php and had no luck on that. Where to place this best?

• This reply was modified 6 years, 3 months ago by Guenni007.

first: where does that rule come from? ( child quick css line 5 and 408)

#top .grid-sort-container .media-library_sort {
    display: none;
}

get rid of that rule and you will see 9 videos and 4 Elements on the other page