Yes – some animations – like the reveal animation – create extra child containers – then the target will be different.
but nevertheless on f.e. simple left to right – it works sometimes – sometimes not – so the code is useless.
So – a developer had to look for it – if there is a chance to “refresh” those keyframe animations.

But why ?
this is typographically correct – have a look to a Sentence where all round Letters on the bottom ( o, e, c, etc ) are on the same line like the n, m, z etc.
This looks horrible. The same here.

You can try that yourself
duplicate your heading and after the line break (br-tag) insert   and compare

or start your second line with an A too! Just to see what happend to second line

here is another way to get it.
Starting point is – header setting: logo left – menu right !

the rest with snippet for child-theme functions.php and quick css is all on that page: https://pureinstall.webers-testseite.de/logo-centered/

that method provides a way to have shrinking header too !

_________________

btw. you can do that manually – by inserting the logo as image in your menu ( that is what the script does )
This can be done by inserting the image src code to the Menu Label. – for better selecting that Menu-Item give a custom class to it ( all can be done in Menu Options )
The Rest is quick css – like you find it on that page if you break to hamburger on 989px the min-width media querry had to be adjusted to 990px

What exactly do you mean by “does not load”
because i see that you have used color-section, columns etc. pp.

a jQuery Option could be to have intersectionObserver and give to elements that comes into viewport a class – and if they are out remove that class.

see here f.e. the headings: https://webers-web.info/

example code could be:

function observe_headings_on_homepage() {
?>
<script type="text/javascript">	
	const wrappers = document.querySelectorAll(".av-special-heading")
	const targets = document.querySelectorAll(".av-special-heading-tag")
	const animClass = ["in-view"]
	
	const observer = new IntersectionObserver((entries, observer) => {
		entries.forEach(entry => {
			const currentIndex = Array.from(wrappers).indexOf(entry.target)
				if (entry.isIntersecting) {	
					targets[currentIndex].classList.add(animClass);	
				} 
				else {
					targets[currentIndex].classList.remove(animClass);
				}
		})
	}, {
		root: null,
		threshold: 0.1,
		rootMargin: "-120px 0px -100px 0px",
	});

	wrappers.forEach(wrapper => {
		observer.observe(wrapper)
	});	
	
</script>
<?php
}
add_action( 'wp_footer', 'observe_headings_on_homepage' );

for that page above i set then the css in quick css:

.heading-animation .av-special-heading-tag .heading-wrap,
#top.privacy-policy .heading-animation .av-special-heading-tag {
    transform: scale(0);
    transform-origin: center center;
    opacity: 0;
    transition: 0.5s all ease;
}

.heading-animation .av-special-heading-tag.in-view .heading-wrap,
#top.privacy-policy .heading-animation .av-special-heading-tag.in-view {
    transform: scale(1);
    transform-origin: center center;
    opacity: 1;
    transition: 1s all ease;
}

you can do that with columns etc.

BTW: the fluid font-size calculator here on the page: https://websemantics.uk/tools/fluid-responsive-property-calculator/ is a mighty tool

And for better browser support – i use the min max option.

the simple way : – just insert to your main menu a telephone link – you can have there even images before the label text etc.
e.g:
as link: tel:905.639.9972 and f.e. put in as label : [av_font_icon icon='ue854' font='entypo-fontello' size='30px' position='left' color=''][/av_font_icon] Call us
______________
or is it ok for you – if you only have an icon ( telephone ) besides the social media icons?
create a custom social icon:

function avia_add_telephone_icon($icons) {
  $icons['tel']  = array( 'font' =>'entypo-fontello', 'icon' => 'ue854');
  return $icons;
}
add_filter('avf_default_icons','avia_add_telephone_icon', 10, 1);

// Add new icon as an option for social icons
function avia_add_telephone_social_icon($icons) {
  $icons['Tel'] = 'tel';
  return $icons;
}
add_filter('avf_social_icons_options','avia_add_telephone_social_icon', 10, 1);

the new “social media link” will be at the end of the dropdown list in social media symbols enter then your telephone number as link ( tel:905.639.9972 )
maybe better with your country

if you like to have it more perfect – you can style it like every other social media link:

#top #wrap_all .av-social-link-tel:hover a, 
#top #wrap_all .av-social-link-tel a:focus {
  color: #fff;
  background-color: #37589b;
}

etc.

PS : lass dir mal von einem Mod helfen – mittles z.B. better search and replace – deine Datenbank nur noch https zu laden.
Du hast ne menge gemischte Inhalte , was dazu führt, dass du oben nicht mehr als sichere Webseite eingestuft wirst.

hauptsächlich betrifft das deine Schriftarten, die du selbst hostest.

can you try this :

@media only screen and (max-width: 767px) {
  .responsive .logo img,
  .responsive .logo svg {
    max-height: 120px;
    top: 5px;
    left: 50%;
    transform: translateX(-50%)
  }
  .responsive #top #wrap_all .main_menu {
    height: 120px !important;
    right: -20px;
    left: auto;
  }
  .responsive #top .logo{
    max-height: 120px;
    width: 100%;
  }
  .responsive #top #main {
    padding-top: 0px !important;
  }
  .responsive.html_top_nav_header .av-logo-container {
    height: 120px !important;
  }
}

aha – this is a possiblility to change the options tab via child-theme:
( sometimes the settings had to fit with preset css ( layout.css , grid.css )) – and so maybe for the setting there is no correspondence to find )
but in this case it seems to be only that css setting above – that is influenced by this options tab.

put this to your child-theme functions.php:

function my_avf_option_page_data_change_elements( array $avia_elements = array() ){
  $slug = "layout";
  $id   = 'content_width';
  $index = -1;
  /** Find index of element to change*/
  foreach( $avia_elements as $key => $element ){
    if( isset( $element['id'] ) &&  ( $element['id'] == $id ) && isset( $element['slug'] ) && ( $element['slug'] == $slug ) ){
      $index = $key;
      break;
    }
  }
  
  /** * If key not found, return unmodified array*/
  if( $index < 0 ){ return $avia_elements;}
  
  /*** Make your customizations*/ 
  $avia_elements[ $index ]['subtype'] = array(
								'90% | 10%' => '90',
								'89% | 11%' => '89',
								'88% | 12%' => '88',
								'87% | 13%' => '87',
								'86% | 14%' => '86',
								'85% | 15%' => '85',
								'84% | 16%' => '84',
								'83% | 17%' => '83',
								'82% | 18%' => '82',
								'81% | 19%' => '81',

								'80% | 20%' => '80',
								'79% | 21%' => '79',
								'78% | 22%' => '78',
								'77% | 23%' => '77',
								'76% | 24%' => '76',
								'75% | 25%' => '75',
								'74% | 26%' => '74',
								'73% | 27%' => '73',
								'72% | 28%' => '72',
								'71% | 29%' => '71',

								'70% | 30%' => '70',
								'69% | 31%' => '69',
								'68% | 32%' => '68',
								'67% | 33%' => '67',
								'66% | 34%' => '66',
								'65% | 35%' => '65',
								'64% | 36%' => '64',
								'63% | 37%' => '63',
								'62% | 38%' => '62',
								'61% | 39%' => '61',

								'60% | 40%' => '60',
								'59% | 41%' => '59',
								'58% | 42%' => '58',
								'57% | 43%' => '57',
								'56% | 44%' => '56',
								'55% | 45%' => '55',
								'54% | 46%' => '54',
								'53% | 47%' => '53',
								'52% | 48%' => '52',
								'51% | 49%' => '51',
								'50% | 50%' => '50'
							);
  return $avia_elements;
}
add_filter( 'avf_option_page_data_init', 'my_avf_option_page_data_change_elements', 10, 1 );

i used it once in a similar way for footer_columns.

• This reply was modified 2 years, 4 months ago by Guenni007.

i don’t know if there is an easy way to add mega-menu functionality to sub-menu but:

i would not use the submenu on that – but header layout : logo left – menu below – so you can use all features of main menu.
and to get the top right menu – use a header widget area. And place a navigation menu widget in it.

the ul list items got a padding: .8em 3px

but before we change that value or shift the ul up – it is easier if you go to the right column with the slider – edit that column and give a padding top to that column of about 18px

well then, piece by piece – again, it’s better to remove all the code I gave you and replace it with this one:

@media only screen and (max-width:767px) {
  .avia-icon-list.av-iconlist-big .iconlist_icon {
    float:none;
    margin: 0 0 25px;
    position: relative;
    left: 50%;
    transform: translateX(-50%) !important;
  }
  .avia-icon-list.av-iconlist-big .entry-content-header {
    text-align : center !important;
  }
  .avia-icon-list.av-iconlist-big .iconlist_content  {
    text-align: left !important
  }
  .avia-icon-list.av-iconlist-big .iconlist-timeline {
    display: none
  }
}

thanks