Hi, I’m not sure if this is the same issue, but I’ve encountered a problem with shortcodes showing at the top while having to scroll to the bottom to use the Avia Layout Builder from Enfold 2017.

Of course, this is a little annoying but even more so, I keep getting a message stating “This block contains unexpected or invalid content.” which causes the block to expand to show the entire page, so it takes forever to get down to the builder. Idk why this is showing and the front page seems to look and act completely fine. I tried to resolve it and then save the page once it’s corrected, but when I open the page up again, the error is back.

I think this also has to do with every page claiming “There is an autosave of this post that is more recent than the version below. View the autosave”
When I always save my page after making changes. But now even when I don’t make any changes, it acts as I did by asking if I want to save or leave.

This whole experience is highly frustrating especially since the front end looks completely fine and unchanged, and yet everything that’s supposed to resolve these issues doesn’t actually “stick”.

If someone could please look into it, I’ll provide my login. I’ve searched on all the forums and tried to solve it myself but after a week, I really need your help!

Thank you in advance!!

–Steph

hast du ein Child-Theme installiert? Macht die Sache einfacher und “update resistent”

Also : aktiviere bitte im Footer die Social Media Icons ( Enfold – Footer – Social Icons)
Diese werden jetzt als Grundlage dafür genommen – diese in das Hauptmenu einzusetzen und in das Hamburger Menu auch.
Siehe meine Testseite im responsiven Fall.

jetzt der Code für die child-theme functions.php

/************* verschieben der #socket social buttons in das Haupt-Menu und in das mobile (hamburger) menu ************/
function ava_main_menu_social(){
?>
<script>
(function($){
	$('#socket .social_bookmarks').css({ 'display': 'none' });

	$('#header').one('click', '.av-main-nav-wrap', function() {
    var isMobile  = $('.av-burger-menu-main').css('display'),
    social    = $('#socket .social_bookmarks').clone(true).addClass('sub-menu'),
    mobileMenu  = $('.av-burger-overlay');
    mobileMenu.find('#av-burger-menu-ul').append('<li class="only-burger menu-item-social av-active-burger-items"><a itemprop="url" alt="Social Bookmarks" style="" href="#"><span class="avia-bullet"></span><span class="avia-menu-text">Social Bookmarks</span><span class="avia-menu-fx"><span class="avia-arrow-wrap"><span class="avia-arrow"></span></span></span></a></li>');
  
    if( social.length ){
      mobileMenu.find('.only-burger.menu-item-social').append(social);
    }
	});
				
  var htmlString   = $('#socket .social_bookmarks').clone().find('li a'),
  socialString = [];

  htmlString.each(function() {
    var socialClass = $(this).parent('li').attr('class'),
        socialItems = $(this).wrap('<li class="'+ socialClass + ' menu-item menu-item-avia-special menu-social"></li>').parent().unwrap();
    socialString.push(socialItems);
  });
	
 	var socials = socialString.reverse();
  $(socials).each(function() {
        $(this).appendTo('#avia-menu');
  });
	$('#avia-menu .menu-social').css('float', 'right');
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'ava_main_menu_social');

( wenn ich mal den Code erklären soll sag bescheid * )

damit das im responsiven Fall auch hover states hat im Hamburger Menu müssen da einige css Sachen erneut gesetzt werden.

das also in das quick css

.responsive #top #avia-menu-0 .menu-social { display: none }

#av-burger-menu-ul .menu-item-social > a {
  pointer-events: none;
}

@media only screen and (max-width: 768px) {
  .main_menu .social_bookmarks {
    display: none !important;
  }
  .avia-menu.av_menu_icon_beside {
      padding-right: 0;
      margin-right: 0;
      border-right: none !important;
  }
}

@media only screen and (min-width: 769px) {
.main_menu .social_bookmarks:not(.sub-menu) {
  overflow: visible !important;
  display: flex !important;
  flex-flow: row wrap;
  justify-content: space-between;
  align-content: center;
}

.main_menu .social_bookmarks:not(.sub-menu) li {
  flex: 0 1 30%;
  line-height: unset !important;
  margin: 2px 0;
}

  .only-burger.menu-item-social {
    display: none
  }
}

#av-burger-menu-ul .menu-item-social a .avia-menu-text {
  font-style: italic;
}

#av-burger-menu-ul .only-burger.menu-item-social {
    border-top: 1px dashed gray;
    border-bottom: none !important;
}

.html_av-overlay-side-classic #top .av-burger-overlay li.menu-item-social a {
border : none !important
}

.responsive #top #av-burger-menu-ul .social_bookmarks.sub-menu {
  margin-left: 30px;
  overflow: visible;
  float: left !important;
  display: block !important;
  height: auto
}

#av-burger-menu-ul .social_bookmarks.sub-menu li {
    display: block;
    margin: 3px 10px;
    float: left;
}

#av-burger-menu-ul .social_bookmarks.sub-menu li a {
  padding: 10px !important;
  display: table-cell !important;
  float: none !important;
border-radius: 0 !important
}

#top #wrap_all #av-burger-menu-ul .av-social-link-facebook a { padding: 10px 13px !important;}
#top #wrap_all #av-burger-menu-ul .av-social-link-rss:hover a{color:#fff; background-color:#ffa133!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-facebook:hover a{color:#fff; background-color:#37589b!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-twitter:hover a{color:#fff; background-color:#46d4fe!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-whatsapp:hover a{color:#fff; background-color:#00e676!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-mail:hover a{color:#fff; background-color:#9fae37!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-dribbble:hover a{color:#fff; background-color:#e44885!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-linkedin:hover a{color:#fff; background-color:#419cca!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-search:hover a{color:#fff; background-color:#222222!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-gplus:hover a{color:#fff; background-color:#de5a49!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-behance:hover a{color:#fff; background-color:#008cfa!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-flickr:hover a{color:#fff; background-color:#ff0086!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-forrst:hover a{color:#fff; background-color:#234317!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-myspace:hover a{color:#fff; background-color:#000000!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-tumblr:hover a{color:#fff; background-color:#345574!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-vimeo:hover a{color:#fff; background-color:#31baff!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-youtube:hover a{color:#fff; background-color:#a72b1d!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-pinterest:hover a{color:#fff; background-color:#cb2027!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-skype:hover a{color:#fff; background-color:#12a5f4!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-instagram:hover a{color:#fff; background-color:#a67658!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-five_100_px:hover a{color:#fff; background-color:#222222!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-soundcloud:hover a{color:#fff; background-color:#F76700!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-xing:hover a{color:#fff; background-color:#006567!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-vk:hover a{color:#fff; background-color:#597BA5!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-reddit:hover a{color:#fff; background-color:#FF4500!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-yelp:hover a{color:#fff; background-color:#d32323!important; }
#top #wrap_all #av-burger-menu-ul .av-social-link-kununu:hover a{color:#fff; background-color:#2fb313!important; }

Hi Geoffdyle
I’m not sure whether thats possible with the integreted background video function in Enfold. You need to add special code. Maybe google is blocked in your location so I just made a quick search and found a description video on YouTube:
https://www.youtube.com/watch?v=Xc25RykxUrM
I think you need to make the desktop colour section invisible for mobile and create a code container for mobile devices.
Edit the code the way you need it

<!-- 1. The <iframe> (video player) will replace this <div> tag. -->
<div class="iframe-container">
  <div id="player"></div>
</div>
<script>
  // 2. This code loads the IFrame Player API code asynchronously.
  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // 3. This function creates an <iframe> (and YouTube player)
  //    after the API code downloads.
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      width: '100%',
      videoId: 'YOUR_VIDEO_ID',
      playerVars: { 'autoplay': 1, 'playsinline': 1 },
      events: {
        'onReady': onPlayerReady
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
     event.target.mute();
    event.target.playVideo();
  }
</script>