ok: no – the svg as inline svg in the functions.php. No need to upload!

you see now on your DOM – and that you can change all fill colors or opacities you like via quick css:

The easier way – but not so mighty as the other possibility.
Upload to your media library that svg: https://webers-testseite.de/wp-content/uploads/waves.svg

put in your quick css:

#start::before {
    content: "";
    background-image: url(/wp-content/uploads/waves.svg); /**** be carefull if you have the installation in a subfolder - maybe better an absolute path ***/
    background-repeat: no-repeat;
    background-size: 100vw 200px;
    background-position: left bottom !important;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 50;    
}

disadvantage of this method: if you now had a following section with a background-color, you could not change the white in svg by css.

on the site you linked to – it is done via insertion of a svg file in a pseudo container ( :before )
but you have then an img svg ( a background-image : … svg )
i prefer to have real inline svg on that – because we can do even animated svgs as divider ( see footer ) and you can have fast influence on the background-color of non-transparent part by css with fill color.

https://webers-testseite.de/pureinstall/fullwidth-slider/

here is nearly the same svg as on your example page:
on the most svg-dividers there is allways a transparent side and a side where a background-color is forming the border to the other section.
https://webers-testseite.de/pureinstall/wp-content/uploads/waves-2.svg
The gray is just a background for contrast reasons and shows you the transparent part of the svg.
Look now to your example page: The image on top has the transparent side of the divider.
the white non-transparent part of the divider goes to the section with white background.

See here the code for that svg:

<?xml version="1.0" encoding="utf-8"?>
<svg id="Waves" data-name="waves" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 106.24" width="100%" height="200px" preserveAspectRatio="none">
	<style>
		#Waves{background-color: #aaa}
		.bottom-bg{fill:#fff;}
		.color-1{fill:#339996; opacity:0.15;}
		.color-2{fill:#6faeb0; opacity:0.3;}
	</style>
	<title>waves</title>
	<rect class="bottom-bg" y="29.37" width="1199" height="76.87"/>
	<path class="color-1" d="M591.67,80.53l24.89,2A3705.31,3705.31,0,0,0,1200,82.26v2.53A3705.31,3705.31,0,0,1,616.56,85l-24.89-2A3704.3,3704.3,0,0,0,76.38,78.51L0,83.16V80.63L76.38,76A3704.3,3704.3,0,0,1,591.67,80.53Z" transform="translate(0 -1)"/>
	<path class="bottom-bg" d="M607.82,14.52,583,16.85A3116.84,3116.84,0,0,1,0,16.57V45.95a3116.84,3116.84,0,0,0,583,.28l24.87-2.32a3115.7,3115.7,0,0,1,514.86-5.4L1199,44V14.64l-76.32-5.52A3115.7,3115.7,0,0,0,607.82,14.52Z" transform="translate(0 -1)"/>
	<path class="color-2" d="M608.33,14.52l-24.89,2.32A3122,3122,0,0,1,0,16.57V45.95a3122,3122,0,0,0,583.44.28l24.89-2.32a3120.89,3120.89,0,0,1,515.29-5.4L1200,44V14.64l-76.38-5.52A3120.89,3120.89,0,0,0,608.33,14.52Z" transform="translate(0 -1)"/>
	<path class="color-2" d="M608.33,14.52l-24.89,2.32A3122,3122,0,0,1,0,16.57V44L76.38,38.5a3120.89,3120.89,0,0,1,515.29,5.4l24.89,2.32A3122,3122,0,0,0,1200,45.95V14.64l-76.38-5.52A3120.89,3120.89,0,0,0,608.33,14.52Z" transform="translate(0 -1)"/>
</svg>

it is nearly the same structure as a html page.
You can have styles in it etc. pp.
You see the class : bottom-bg if you must have a section following with blue background – just redefine the fill color to blue on quick css – thats all.
So you can use one svg file to have as divider for different sections.

– so after inspecting your post above with developer tools – i found your video – ( the link above is not clickable )
these three links – are not main-menu links – these are made with content element : fullwidth sub menu
and as far i can see they are centered allready.

You main menu is set directly to have as burger menu.

So now – what would you like to do? place this custom menu inbetween logo and main-menu.

If this will work – what would you like to do in responsive case with them?

This is the status quo on iphone:

And this on ipad

So what to do on this case?

on most cases it will be possible to insert those texts or headings in a column. These columns have on their options the opportunity to animate in the same way.
Advanced Tab on Options : Animation

It is a littel bit more than only hiding the pointer – the click event is gone. So no mouse-event anymore. But thats why i asked you if you want to completely remove the link setting on this.

the helper-post-format.php is responsible for that.
On line 54ff there is the avia_default_title_filter
And as a pluggable function you can load it in your child-theme functions.php.

But difficulty on this is that it rules both – the heading (h2) on blog view and the heading (h1) on single-post.
So we had to have an if clause here too like on the heading tag above.

put this in your child-theme functions.php

function avia_default_title_filter($current_post)
{
	if(!empty($current_post['title']))
	{
		$default_heading = is_singular() ? 'h1' : 'h2';
		$args = array(
					'heading'		=> $default_heading,
					'extra_class'	=> ''
				);
		
		/**
		 * @since 4.5.5
		 * @return array
		 */
		$args = apply_filters( 'avf_customize_heading_settings', $args, 'avia_default_title_filter', array( $current_post ) );
		
		$heading = ! empty( $args['heading'] ) ? $args['heading'] : $default_heading;
		$css = ! empty( $args['extra_class'] ) ? $args['extra_class'] : '';

		$output  = "";
		//$output .= "<{$heading} class='post-title entry-title ". avia_offset_class('meta', false). "'>";
		$output .= "<{$heading} class='post-title entry-title {$css}' ".avia_markup_helper(array('context' => 'entry_title','echo'=>false)).">";
		$output .= is_singular() ? $current_post['title'] : "<a href='".get_permalink()."' rel='bookmark' title='". __('Permanent Link:','avia_framework')." ".$current_post['title']."'>".$current_post['title'];
		$output .= "<span class='post-format-icon minor-meta'></span>";
		$output .= is_singular() ? '' : '</a>';
		$output .= "</{$heading}>";
		$current_post['title'] = $output;
	}
	return $current_post;
}

it now will have the link on blog view but on single post there is only the h1 without link

• This reply was modified 5 years, 1 month ago by Guenni007.

so you switched now to 990 px responsive break point.
Then it would be better to only have the upper rule!
And get rid of the mediaquery for 767px
leave only this rule in your quick css and delete the other media-query:

@media only screen and (min-width: 990px) {
 html::before {
  content: '';
  background-color: #4b6969;
  width: 100%;
  position: fixed !important;
  z-index: 5;
  top: 0;
  left: 0;
  height: 15px;
 }
 .html_header_top.html_header_sticky #header {
  width: calc(100% - 30px);
  left: 15px !important;
  top: 15px  
 }
}

i don’t see why the padding-top of main is in your code set to a value on responsvie case – but this will correct the issue for it:

@media only screen and  (max-width: 767px) {
.html_header_top.html_header_sticky #top #wrap_all #main {
    padding-top: 0 !important;
}
}

for your editing problem a mod should look around in your installation.
So you might leave an admin login for them in the Private Content field.
I have no idea what this could be responsible for.

Goto: Dashboard – Users and choose your profile : on Toolbar there is: “Show Toolbar when viewing site ”
Sometimes it is necessary to not show – because the Adminbar Height is not included in calculations on the page. f.e. paddiing-top values.
So on that case you see not what you get as logged out user.

Furthermore:
I think it would be better for your menu styling if you have choosen the option on Enfold – Header – Header Behavior : “Let logo and menu position adapt to browser window”

Then
Is it the intention that the content is shown above your header?
Furthermore, is it intended that the header, similar to a banderole, also overlays the green borders left and right?

Maybe you can try this code and see if it fits better your needs:

@media only screen and (min-width: 990px)  {
  html::before {
    content: '';
    background-color: #4b6969;
    width: 100%;
    position: fixed !important;
    z-index: 5;
    top: 0;
    left: 0;
    height: 15px;
  }

  .html_header_top.html_header_sticky #header {
    width: calc(100% - 30px);
    left: 15px !important;
    top: 15px
  }
}

@media only screen and (min-width: 768px) and (max-width: 989px) {
  html::before {
    content: '';
    background-color: #4b6969;
    width: 100%;
    position: fixed !important;
    z-index: 5;
    top: 0;
    left: 0;
    height: 30px;
  }

  .html_header_top.html_header_sticky #header {
    width: calc(100% - 60px);
    left: 30px !important;
    top: 30px
  }
}

Maybe it is best to switch earlier in responsvie mode
see f.e.: Enfold – Main Menu – General : Menu Items for mobile ( choose 990px) here and lets see whats happening with your menu – if it still overlaps the logo

• This reply was modified 5 years, 1 month ago by Guenni007.

yes – quick css is good place for it – and fast changed.
Looks nice now! even on Iphone5

btw: No need to call me sir – El Supremo is quite enough :lol: ;)

no – i’m just kidding – you are welcome – and i think it is good netiquette and common in communities to be on familiar terms.

• This reply was modified 5 years, 1 month ago by Guenni007.

How did you try to implement this code above?
Do you work with a child-theme ?

It is a pitty that enfold changes it to a parallax container with scroll. because that workaround will do the trick even here.
On grid-cells you can see that it worked : https://webers-testseite.de/
those wordpress signs on the left.

and here on the bottom color-section with background : scroll but with the trick over :before with class : bg-fixed:
https://webers-testseite.de/background-fixed/

• This reply was modified 5 years, 1 month ago by Guenni007.

Next piece of advice: If you’re planning a major update, I wouldn’t go that way through the dashboard.
An interrupted update there or an update that runs through but then doesn’t work properly is irreversible.
My tip: https://kriesi.at/support/topic/some-hints-and-advice-to-update-enfold/#post-1056107

On smaller Updates i sometimes use the Plugin: Update Themes and Plugins from zip files

This littel Tool can make a Database backup and you can roll back if you must do.

unter meinem Nick oder Avatar auch , verbirgt sich bei denen die es mit angaben eine HomeUrl – da hast du meine Kontaktdaten.
Gerne auch per E-Mail – wenns nicht ausufert. ;)

Ich entferne jetzt mal wieder die Bilder und das Logo – lasse andere Bilder und Text drin.

Lieber Franz – gerne helfe ich weiter, aber du hast offensichtlich noch nicht verstanden, das wir beide nur Teilnehmer hier sind.
Wenn du die Links nicht veröffentlichen kannst, weil der Kunde das nicht möchte oder du bedenken hast, dann geht es nur über diesen Private Content, dann kann ich dir aber nciht weiterhelfen, denn diese Inhalte sehe ich nicht.
Sorry – dann musst du auf Moderatoren hier warten.