the reason why i ask is – if it is an image placed to a text-block via media library – you can set these options on hovering the image after placement – click that pencil (edit) and fill in what you need: especially the noLightbox class:

besides that – what do you like to obtain by – that on a “shrinking” header?

newH = el_height/1;

Changing only this line – causes the header height to jump when it has covered the scroll distance.
Here you can see the mathematical background of the shrinking header : https://kriesi.at/support/topic/shrinking-of-header-amount-an-info/

maybe it is better to hamper the shrinking via Enfold Options – header – Header Behavior : Shrinking Header

One thing is to use the header: logo – center, menu – below
and then change position in dom via child-theme functions.php:

function change_position() { 
?>
<script>
(function($){
	$('#header_main_alternate').insertBefore($('.av-logo-container'));
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'change_position');

next will be to calculate the shrink amount – i test that in the meanwhile.

the p tag got a top/bottom margin of 0.85em

p {
    margin: 0.85em 0;
}

even if you set this to Zero – there will be a litle distance.
But what if you place a separator/whitespace line above the image with a height of 0.85em ?

and on responsive case – that text under the image – you can set the whitespace to hide on smaller screens.

And because of event.which is deprecated ( i erased that function above ) use better:
( on child-theme functions.php )

function disable_enter_key(){
?>
<script type="text/javascript"> 
(function($) {
	$(document).on('keypress keydown keyup', '#searchform', function(e) {
	  if(e.keyCode == 13) {
		e.preventDefault();
		return false;
	  }
	});
})(jQuery);	
</script>
<?php
}
add_action('wp_footer', 'disable_enter_key');

by the way: on small screens ( mobile devices ) the ajax response list maybe too big for the screen. On default – it is not scrollable that window:

#top #searchform .ajax_search_response {
    max-height: calc(100vh - 200px);  /* test it with fitting settings */
    overflow-y: auto;
    height: auto;
}

disadvantage: maybe you do only hamper enter key on desktop devices ! because on my mobile the text input will be closed by enter key ;)
so maybe that line above to replace by:
$(document).on('keypress keydown keyup', 'html:not(.avia_mobile) #searchform', function(e) {

you are reffering to a page ( you link above https://kriesi.at/support/topic/open-popup-modal-with-button/ ) – there are several snippets – but this is an older topic – you have to replace that line with mine – not to replace the whole code . This is mikes link to Ismaels Post . You see that here is the setting of no-scroll class on the initiating anchor. And you see that there is window on load.
___________
Some info on that.
So you have placed a hidden code block on the page. That codeblock got an unique ID – and an anchor is linking to that ID.
How would a (non-lightbox) link to an ID on the same page behave?
You click it, and it scrolls to the anchor there.
The trick with this modal window is that the html code is inside a code block. Nevertheless, the code block is in a place inside your DOM. So if this codeblock is at the bottom – the modalwindow opens, but still the window scrolls to the place where the codeblock is in the layout. This can be prevented in Enfold, by setting the class no-scoll to that link.

The fact that the background no longer moves with the scroll when the lightbox is open has become standard – or so I thought. (This is what Mike had recommended and belongs to the earlier solution to assign the property overflow-y: hidden to the html.
If you could please post your snippet here, then I can tell you better in this regard what to change.

try to give to the link that initiates the modal window a custom-class ( has to go to the anchor itself ) : no-scroll

PS: pay attention that is a very old topic – in the meanwhile we got jQuery 3.5.1 –
the code jQuery(window).load(function(){ is deprecated
and you had to use instead:

$(window).on('load', function(){

Du möchtest keinerlei Link dort haben?
Ist das wirklich das was ein Besucher deiner Seite erwarten würde, wenn er die Suche anstrengt?
Wenn ich irgendwo auf einer Seite einen Begriff suche erwarte ich auch, dass mir der entsprechende Link dorthin auch angezeigt wird.
Was bezweckst Du damit?
__________
You don’t want to have any link there?
Is that really what a visitor to your site would expect when they search?
When I search for a term somewhere on a page, I also expect the corresponding link to be displayed.
What do you want to achieve with that?

.ajax_search_response a {
    pointer-events: none !important;
}

PS – du kannst auch die ajax Suche ganz abschalten und direkt zur Suchseite weiterleiten.

sorry i didn’t see that you solved allready your issue.

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

ich weiß nicht woran es liegt. Früher gingen die youtu.be links.

PS : an deiner Font Geschichte mußt du arbeiten, da sind eine Menge Fehlermeldungen in der Konsole

to what element does the ID: #impact-boxes belong?
i do not believe that it is a parent of #wrap_all ! This is parent of all content you can set on default.
the #top ID belongs to the body tag and is parent of #wrap_all
so this might be the right sequence ( cascading ) : .responsive #top #wrap_all #impact-boxes .flex_column
if it is a color-section

yes – that is nearly exactly my solution – only that change in gallery.js i think it is not necessary.
– but it has the disadvantage ( as mentioned above ) – that there is no “gallery mode” ( on magnificPopup: gallery: { enabled:true }, )

And how about the option to save the color-section as template?

I use that for a lot of prestyled layouted Color-Sections
you find those templates in the upper right side –
Or save a whole page as template !