if you like to have no sidebar on the iframe replace that part above that checks if frame or not with:

	if (top === self) { 
		// no frame
	} else { //frame 
		$('#header, #footer, #socket, .sidebar').hide();
		$('#main').attr('style', 'padding-top: 0px !important'); 
		$('.container .av-content-small').css('width', '100%');
		$('.content').css('border-right', 'none');
	};

and if you like to have the link of the concerning categorie aswell open in a lightbox – extend the selectors to:

$('.open-in-lightbox a.slide-image, .open-in-lightbox .blog-categories > a,  .open-in-lightbox .slide-entry-title > a').magnificPopup({

Did you see the additonal tab on enfold – general styling – typography
there is a comment that the first option is for body

you can leave the other screen options on default and change only the first option – then it will be the same as before setting the body font

you can see here on top of that page a masonry with portfolio links.
If you click to open it – it will open that portfolio in a lightbox ( but the complete page )
https://webers-testseite.de/lightboxes/
Is it the way you like to have it?

i can see the animation too. ( Firefox, Safari, Chrome on OSX )

there is one thing to mention : if your screen is bigger than the image size – the animation stops.
maybe you setup a background-size to that section f.e. : background-size: 110%

as ismael mentioned at last there is on your menu options page – on top right a slide-out button – labeled : Screen Options

after slide out – you can choose on “Show advanced menu properties” : CSS Classes

or place that link in the menu as f.e.: individual Link and give that class to the item: menu-item-avia-special
you can choose the option: button style here aswell.

Nice advantage is: if the burger-menu is opened – the button stayes on top like the burger icon.

after menu-item-1988 – there is a semicolon – that is not right ! ( If you got more selectors in front of that rule they are separated by commata )
so remove that semicolon:

.page-id-1500 #menu-item-1988 {
  display: none !important;
}

Correct – then let me know if everything worked.

well try to create your own keyframe animation.
At the end f.e. a kenburns effect is nothing else than that. see: https://codepen.io/SaijoGeorge/pen/LxeGgY

so to better select the color-section – give a unique ID or custom-class to it – in my test page it is: animated-background as class.
a slide from left to right and back is f.e:

.avia-section.animated-background {
 animation: anime 60s linear infinite;
}

@keyframes anime {
 0% {
  background-position:0% 50%
 }
 50% {
  background-position:100% 50%
 }
 100% {
  background-position:0% 50%
 }
}

(see link to codepen – and add the other browser fixes too ( -webkit seems to be the most important now ) )
see: https://webers-web.info/moving-background/

you find that file in: enfold/config-templatebuilder/avia-shortcodes/toggles.php
open it on you desktop pc with a good texteditor ( ;) not word ) ( notepad++ or sublime text for mac osx)
find all p.toggler and replace them with f.e.: h3.toggler
find that code above and replace p with h3 ( don’t forget the closing tag )
save that edited alb element on your desktop pc.

Now:
to have child-theme substitutes for enfold alb elements – create a subfolder on your enfold installation via ftp named : shortcodes
upload to that subfolder the toggles.php file

and put this to your child theme functions.php:

function avia_include_shortcode_template($paths){
  $template_url = get_stylesheet_directory();
      array_unshift($paths, $template_url.'/shortcodes/');
  return $paths;
}
add_filter('avia_load_shortcodes', 'avia_include_shortcode_template', 15, 1);

see documentation of enfold: https://kriesi.at/documentation/enfold/intro-to-layout-builder/#add-elements-to-alb

this is the way you can replace every alb element by a child-theme alb.

you can see and download the toggles.php with h3 toggle-titles from here: https://pastebin.com/uyJAY2da

see: https://webers-web.info/testseite/#h3-title

this here is a temporarly remove of the title tag
you must adopt your selector to what you need ! ( var links )

function temporary_removal_title_tags(){
?>
<script>
  window.onload = function() {
    //var links = document.querySelectorAll('a,img,div[title]');
      var links = document.getElementsByTagName("img");
      for (var i = 0; i < links.length; i++) {
          var link = links[i];
          link.onmouseover = function() {
              this.setAttribute("org_title", this.title);
              this.title = "";
          };
          link.onmouseout = function() {
              this.title = this.getAttribute("org_title");
          };
          link.onclick = function() {
              this.title = this.getAttribute("org_title");
          };
      }
  };
</script>
<?php
}
add_action('wp_footer', 'temporary_removal_title_tags');

you see what the code does: it saves the original title to another attribute : org_title
now if the mouse hovers – the title is empty but the original title is saved to another attribute.
if you leave it ( mouseout ) the title is there again.
And on click the title will be there for lightbox captions.
the code above is only for images – but you see the commented line – you can have more selctors here.
you can use the selectors Nikko mentioned above.

See in action here with the enfold tooltip on the images: https://webers-testseite.de/gallery-with-8-images/
normal behavior is here on Gallery with preview ( hove the thumbnails ): https://kriesi.at/themes/enfold-2017/elements/gallery/

there will be both : enfold tooltip and browser tooltip by titles

• This reply was modified 4 years ago by Guenni007.

On Enfold Options: Header > Header Style choose: minimal…
i have changed the way of your example page a little bit, because i don’t think it makes sense to paint over the stroke with another ( 2nd child) either.
You can see it here how I implemented it in Enfold. : https://webers-web.info
Basic idea is that there is an omnipresent svg on the page, and this is used for the menu underscore.
To have the svg always available on all pages:
( to child-theme functions.php ):

add_action('ava_after_body_opening_tag', function() {
  echo '<svg id="stroke" xmlns="http://www.w3.org/2000/svg" width="0" height="0"><defs><path id="line" d="M2 2c49.7 2.6 100 3.1 150 1.7-46.5 2-93 4.4-139.2 7.3 45.2-1.5 90.6-1.8 135.8-.6" fill="none" stroke-linecap="round" stroke-linejoin="round" vector-effect="non-scaling-stroke"/></defs></svg>';
});

and like on the codepen page also in the menu item now set a svg which uses the path of the omnipresent svg:
( under the code above in child-theme functions.php ):

function insert_svg_to_main_navigation() { 
?>
<script>
(function($){
	$('#avia-menu li.menu-item-top-level a' ).prepend('<svg class="button-stroke" viewBox="0 0 154 13"><use href="#line"></use></svg>');
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'insert_svg_to_main_navigation');

the rest is quick css:

body > #stroke,
#av-burger-menu-ul svg.button-stroke {
	display: none;
}

.button-stroke {
	display: block;
	width: calc(100% - 10px);
	height: 20px;
	position: absolute;
	left: 5px;
	top: calc(50% + 15px);
	stroke-width: 2;
	stroke-dasharray: 650;
	stroke-dashoffset: 650;
}

#avia-menu li.current-menu-item > a .button-stroke {
	stroke-dashoffset: 0;
	stroke: #9b0000;  /*** it is up to you if and what color the active state of the menu-item is set here ***/
}

#avia-menu li.menu-item-top-level a:hover .button-stroke {
	stroke: #07a;  /*** the hover color of the stroke ***/
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-name: draw;
	animation-name: draw;
}

@-webkit-keyframes draw {
	100% {
	  stroke-dashoffset: 0;
	}
}

@keyframes draw {
	100% {
	  stroke-dashoffset: 0;
	}
}

you see some parameters you can play with – f.e. stroke width or colors

___________

with this way you should now be able to – animate your own paths as well.
You need the path

that part in the first code above
<path id=”line” d=”M2 2c49.7 2.6 100 3.1 150 1.7-46.5 2-93 4.4-139.2 7.3 45.2-1.5 90.6-1.8 135.8-.6″ fill=”none” stroke-linecap=”round” stroke-linejoin=”round” vector-effect=”non-scaling-stroke”/>

you can create it f.e. in Illustrator, and the path length for the stroke-dasharray and stroke-dashoffset. By the way, you can determine the path length in Illustrator by selecting the path, then in the menu item Window – Document information – and then in the “hamburger” select objects. ( you need the value in px not in mm )

no plugin – but you see that on the codepen a hint how you can achieve that.
Guess the inline svg will be nicer / sharper but the gif solution is much easier to understand.

Nikko – I think you misunderstood him. He sets the sizes there for the headings and p-tag, and the settings then in the alb are not taken into account in his opinion.
This:

settings in the text block alb element for the font size only affect the p-tag not the headings used in the text block.
If you got heading alb – they will be overwritten by that inline-style – and the p-tag in the text-block alb will be overwritten too. But headings used in a text-block will have the settings from that options you mentioned above. You only can overwrite those settings inline – by
( click to enlarge )

I always don’t understand why the pages here have to be so secret that you can’t post the example page. It would be much easier to provide a suitable CSS code on the specific case. At least you could provide a similar case in the demo pages, so you know what it’s about.
Sometimes a fellow participant can also give good advice here.
f.e.: https://kriesi.at/themes/enfold-2017/elements/columns/
that code here:

#av_section_4 .flex_column:nth-child(3) {
  position: relative;
  left: -50px;
  top: 30px;
  box-shadow: 2px 2px 5px #333;
  opacity: 0.6;
  background-color: blue !important;
}

provides this result:

Color and transparency are set only to show you the overlap better.

However, it is recommended to set the whole thing only for the non-responsive case:

@media only screen and (min-width:768px) {
  #av_section_4 .flex_column:nth-child(3) {
    position: relative;
    left: -50px;
    top: 30px;
    box-shadow: 2px 2px 5px #333;
    opacity: 0.6;
    background-color: blue !important;
  }
}