one of the logo graphic could not be found:
…/wp-content/uploads/2024/07/Logo-xyz-350x85px_w.png

why don’t you use a svg for that too?

then the knife:

#top .avia-menu.av_menu_icon_beside {
  border: none !important;
}

by the way : these are not meant as a combination – the blur only works with background-color –
so if you like to use that backdrop-filter – then you had to remove the gradient setting.
Then adjust the blur amount to your needs

Of course, it is always best if we can see the object in question. I realize that people don’t always want pages to become public here.
Regarding my question about the selector: errors could creep in here. Your rule set includes the element to which it is to be applied.
On your post there is only the declaration – not the complete ruleset – selector is missing

borders are always inside the container.
so maybe show me your code with selectors to inspect. The screenshot i do not see – as a participant.

see on top: https://webers-testseite.de/grid-rows/

you like to have a transparency header – on scroll the transparency goes to a given background-color.
the transparency header should have an overlay pattern?

or do you only like to have f.e. :
(Remove the pattern image)

#top .av_header_transparency .header_bg {
  opacity: 0.7;
  filter: alpha(opacity=70);
}

#top .header_bg {
  -webkit-transition:all 1s ease-in-out;
  transition:all 1s ease-in-out;
  background-color: transparent !important;
}

#top .av_header_transparency .header_bg {
  background-image:linear-gradient(to top,rgba(0,0,0,0.001) 0%,rgba(0,0,0,1) 70%);
  background-color:transparent !important;
  -webkit-transition:all 1s ease-in-out;
  transition:all 1s ease-in-out
}

by the way – with svg patterns you can create from f.e.:
_____________

this:

and use them as dividers.

look to svg filmstrip code:

<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px" viewBox="0 0 112 200" xml:space="preserve">
	<path d="M0,0v200h112V0H0z M72.57,157.5H39.43c-11.44,0-20.76-8.92-20.76-20.32V63.18c0-11.4,9.32-20.68,20.76-20.68h33.14
	c11.44,0,20.76,9.28,20.76,20.68v74.01C93.33,148.57,84.01,157.5,72.57,157.5z"/>
</svg>

just get rid of svg tag and put instead the content into a group:

<g>
	<path d="M0,0v200h112V0H0z M72.57,157.5H39.43c-11.44,0-20.76-8.92-20.76-20.32v-74c0-11.4,9.32-20.68,20.76-20.68h33.14
	c11.44,0,20.76,9.28,20.76,20.68v74.01C93.33,148.57,84.01,157.5,72.57,157.5z" />
</g>

now create your pattern like this:

<svg id="pattern" viewBox="0 0 6000 200" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMin slice">
	<defs>
		<pattern id="film_strip" x="0" y="0" width="112" height="200" patternUnits="userSpaceOnUse">
			<g>
				<path d="M0,0v200h112V0H0z M72.57,157.5H39.43c-11.44,0-20.76-8.92-20.76-20.32v-74c0-11.4,9.32-20.68,20.76-20.68h33.14
				c11.44,0,20.76,9.28,20.76,20.68v74.01C93.33,148.57,84.01,157.5,72.57,157.5z" />
			</g>
		</pattern>
	</defs>
	<rect x="0" y="0" width="100%" height="100%" fill="url(#film_strip)"></rect>
</svg>

on the pattern tag – transfer the width/height and x/y values of the origin svg tag to it.
on the new svg tag viewport is then in height the same as the pattern – but much bigger in width.
The rect path is now width 100% and filled with the pattern url!

see: https://webers-testseite.de/divider-on-sliders/

this procedure is nearby the background-repeat method. because we do not have background images here – instead inline svg.
The “single SVG path” had to be designed in such a way that they could be joined together seamlessly.

PPS: the preserveAspectRatio defines how the svg reacts on screen-width reduction – play a bit on : Link

Well, it seems to have been a success.

ich verstehe nicht was du vor hattest.
Du nutzt also ein codeblock element um inline css zu platzieren?
innerhalb des Codeblock Element hast du also dann “add codeblock to content” gewählt,
den Code im Inhaltsbereich dann mit

<style>
.element > .child2 > span { }
</style>

dort eingefügt. Das ergab dann nicht das gewünschte css rule?

_____________

I don’t understand what you had in mind.
So you are using a codeblock element to place inline css?
within the codeblock element you have selected “add codeblock to content”,
the code in the content area with

<style>
.element > .child2 > span { }
</style>

This did not lead to the desired css rule?

__________

ich habe hier mal eingefügt: https://webers-testseite.de/custom-link-to-lightbox/

div > .mfp-close {
 background-color: red !important;
}

und so wird auch das css erstellt.

on enfold the default place where those svg deviders are saved is:
/wp-content/uploads/dynamic_avia/avia_custom_shapes

if you upload those custom dividers to this folder via ftp they are ready to use.
– they only have to be registered for that :
(for child-theme functions.php)
f.e.:

function custom_avf_custom_svg_shapes( array $custom_shapes ) {
$custom_shapes = array(
	'waves-in-motion'	=> array(
			'key'					=> 'waves-in-motion',
			'title'					=> __( 'Waves in motion', 'avia_framework' ),
			'has_flip'    			=> true,
			'has_width'				=> false,
	//		'attachment'			=> 16,
			'filename'				=> 'waves-in-motion'
						),
'waves-in-motion-2'	=> array(
			'key'					=> 'waves-in-motion-2',
			'title'					=> __( 'Waves in motion 2', 'avia_framework' ),
			'has_flip'    			=> true,
			'has_width'				=> false,
	//		'attachment'			=> 17,
			'filename'				=> 'waves-in-motion-2'
			),
	);
return $custom_shapes;
}
add_filter( 'avf_custom_svg_shapes', 'custom_avf_custom_svg_shapes', 10, 1 );

download those files from : https://webers-testseite.de/animated-svgs.zip

Then you can use it like every enfold separator.

On those animated dividers i recommend using it this way :

___________________
PS : you can upload those svg files via media library – but then you can determine the svgs via its ID’s for the usage
the ID of each attachment you can find on list view in media library.

PS : there are plugins listed as code snippet plugins – f.e.: https://en-gb.wordpress.org/plugins/code-snippets/ – then you can use your parent theme and insert those snippets this way.
But my recommendation is to use a child-theme.

May I first say that your main navigation is very confusing; due to a lack of space, a second row is opened – and the contrast is suboptimal if you want it that way;)
My recommendation for your site would therefore be to always use the hamburger menu – even with large screen widths.

How would you like the search to be displayed in the burger menu?
Only as a magnifying glass – or already as an input field?
See: https://pureinstall.webers-testseite.de/

Possible to do both (see link)

make your screen width small to see the hamburger active …

first: have a look at: https://webers-testseite.de/divider-on-sliders/

… next – soon

OK – but it looks good to me
What do you like to change on that?

But apart from that, I think the days of tables are outdated. You can see from the examples of Enfold demos that responsive implementation will always remain problematic. This is always particularly noticeable with large tables like yours. Smaller tables up to 4 columns still work somehow, but after that it only remains clear on large screens.

On your example page ( https://colorlib.com/etc/tb/Table_Fixed_Header/index.html ) you can see that responsiveness is not implemented at all and that you have to scroll horizontally.

thanks: didn’t know about that extra filter in portfolio registration

did you try
for ajax search ( thats the menu search) :

function avf_ajax_search_query_mod( $search_parameters ){
  $defaults = array(
    'numberposts' => 5, 
    'post_type' => array( 'page', 'post' ), 
    'post_status' => 'publish', 
    'post_password' => '', 
    'suppress_filters' => false
  );
  $_REQUEST['s'] = apply_filters( 'get_search_query', $_REQUEST['s']);
  $search_parameters = array_merge( $defaults, $_REQUEST );
  return $search_parameters;
}
add_filter('avf_ajax_search_query', 'avf_ajax_search_query_mod', 10, 1);

and in addition for search resultspage :

function post_types_for_search_results($query) {
  if ( !$query->is_admin && $query->is_search) {
    $query->set('post_type', array('page','post') );
    $query->set('post_status', array( 'publish' ) );
  }
  return $query;
}
add_filter( 'pre_get_posts', 'post_types_for_search_results' );

In this case, your code snippet would be unnecessary.
btw: because of new cpt support in enfold – there is a similar filter for any other cpt: avf_custom_elements_cpt_args – maybe it is possible to use it for specific post-types ( portfolio, product, etc. to have that analog to your code snippet.

here is the code i use for google recaptcha:

function prohibit_google_recaptcha( $prohibited ){
  global $post;
  if( ! $post instanceof WP_Post ){ return $prohibited; }
  
  $content = Avia_Builder()->get_post_content( $post->ID );
  $prohibited = ( false !== strpos( $content, '[contact-form-7 ' ) || false !== strpos( $content, '[av_contact ' ) ) ? false : true;
  
  return $prohibited;
}
add_filter( 'avf_load_google_recaptcha_api_prohibited', 'prohibit_google_recaptcha', 10, 1 );

so – only if contact-form-7 or enfold contact shortcode is found the recaptcha is loaded.