hey Rikard on full-width easy slider the images are not placed as background – they are img’s
When Henk opens the Media Library he can fill out all alt info there and insert them later – you will have the attachment alt as alt for the img.

Edit : you can do that even after you have created the sliders.
Only on fullscreen Slider they are background-images of the li
______

@Rikard – By the way, I confuse the English names often only because the full-width slider was named slideshow_fullsize.php as alb Element, which sounds more like full screen to me. I don’t know why you didn’t name the ALB element slideshow_fullwidth.php –
so i have to look which of them has the background-images too.

hm – does not work on my end here !
(maybe it is because of my webers-testseite and its child-theme functions.php with over 2000 lines of additional test snippets. But i guess there is something missing.
Can you please post the whole thing you have done. The code f.e. in your child-theme functions.php.

Or are you looking only for a solution of first-level menu ( with submenu ) closing? – Then your code is enough for it.
i’m trying to close a second-level by clicking its siblings. This is often the case if you are having a mega menu with column headings and sub-menu under it.

so there must be additional code .
the “siblings-structure” is on sub-menu a bit different – maybe this will work:

function only_one_submenu_open(){
?>
<script>
(function($) {
$(document).ready(function(){ 
	$('body').on( 'click touch', '.av-width-submenu > a', function () {
		$(this).parent('li').siblings().removeClass('av-show-submenu');
		$(this).parent('li').siblings().find('ul').slideUp( "fast");
	});
});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'only_one_submenu_open');

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

i do not have this to examine if it will work but can you try this in child-theme functions.php:

hm – not working – looking for touchfriendly code

ich würde dir das Plugin svg Support empfehlen wollen, weil es zusätzlich die Möglichkeit bietet eventuell die svgs nicht als img sondern als inline svg zu setzen.
Trotzdem benötigt ein svg eine Größenangabe zB width – da es von der Media Library als 0 x 0 image geführt wird.

yes if you better like to use a plugin – this is one i use for it: https://habenicht.io/product/enfold-repeatable-content/
it is not too expensive and it is especially written for enfold.
You will have all “repeatables” on the left side in dashboard – and you can place them by alb.

even if they are different – you wouldn’t realy recognize a difference.
But what version of WordPress and Enfold do you use?
see here : https://webers-testseite.de/color-transformation/
i can define both values – and they are not changed !

well everything you did is correct.
the direct parent element of the items gets the flex property. So you can have that on a color-section your class.
If you just want to do reverse, everything is ok.
So from 1,2,3 becomes 3,2,1

However, if you want to determine the order, you can set it to the flex items

@media only screen and (max-width:767px) {
.column_flex_reorder .entry-content-wrapper {
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap;
}
  .column_flex_reorder .av_one_third:nth-child(1) {
    order:2
  }
  .column_flex_reorder .av_one_third:nth-child(2) {
    order:3
  }
  .column_flex_reorder .av_one_third:nth-child(3) {
    order:1
  }
}

nice Articel here: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Test page: https://webers-testseite.de/defined-order/

can not open your image in the way above.

Can you please explain what you want to achieve with this?
The structure in your image is the default structure of logo left menu right ! except the hamburger menu is hidden when non-responsive menu is shown.

this is one of mine:

i tried this first to see if i could be specific only to non mega-menu issue:

function add_touch_fix(){
?>
<script>
(function($){
	const iPadMenuFix = function() {
        $(this).closest('ul.sub-menu').delay(1000).animate({opacity: 0,},300, function() {
            $(this).css('visibility', 'hidden');
        })
    };

    $('#avia-menu').find('.menu-item-has-children:not(.menu-item-mega-parent).current-menu-item a').on('touchend', iPadMenuFix);
    console.log($('#avia-menu').find('.menu-item-has-children:not(.menu-item-mega-parent).current-menu-item a'));

})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_touch_fix');

but it does not exclude the sub-menu hide on mega-div

i have a similar problem – if the anchor-links in menu are submenu items in the dropdown.
Ipad – on ipad i have on landscape mode often the nicer main menu to see and not the hamburger.

i can open the dropdown menu on ipad but after scrolling to the anchor the submenu does not close.

i tried this in functions.php:

function add_touch_fix(){
?>
<script>
(function($){
	$(document).ready(function(){ 	
		$('.avia_mobile .main_menu ul .dropdown_ul_available .sub-menu li a').on('click touchend', function() {
		  	$(this).closest('.sub-menu').css({
			  	"opacity" : "0",
			  	"visibility" : "hidden",
			});
		});
	});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_touch_fix');

but it does not do the trick. Even with a timeout function it does not work – any advice?

or if you do not like to use the edited alb elements you can replace only that specific heading by this function in child-theme functions.php:

function replace_tags_with_tags(){
?>
<script>
  (function($) {       
      function replaceElementTag(targetSelector, newTagString) {
        $(targetSelector).each(function(){
          var newElem = $(newTagString, {html: $(this).html()});
          $.each(this.attributes, function() {
            newElem.attr(this.name, this.value);
          });
          $(this).replaceWith(newElem);
        });
      }
      replaceElementTag('.page-id-14 .avia-slideshow-1 .slide-1 h2.avia-caption-title', '<h1></h1>'); 
  }(jQuery)); 
</script>
<?php
}
add_action('wp_footer', 'replace_tags_with_tags');

you see that line:

replaceElementTag('.page-id-14 .avia-slideshow-1 .slide-1 h2.avia-caption-title', '<h1></h1>'); 

you can add there as many lines as you like – if you are more specific with the selector you can be very strict in replacing
these lines must be semicolon separated.

F.e. – if you have there :

replaceElementTag('.slide-1 h2.avia-caption-title', '<h1></h1>'); 

every first slide in a slide-show will have a h1 tag then

you can put this into your child-theme functions.php:

function my_avf_customize_heading_settings( array $args, $context, array $extra_args = array() )
{
	if( $context == 'avia_slideshow' )
	{
		$args['heading'] = 'h1';			
		$args['extra_class'] = 'is-h1';
	}
	return $args;
}
add_filter( 'avf_customize_heading_settings', 'my_avf_customize_heading_settings', 10, 3 );

just give that custom-class ( in my case it is : is-h1 ) to the fullscreen-slider

every slide-show with that class will turn the default h2 to h1 tag then.

none No capitalization. The text renders as it is. This is default
capitalize Transforms the first character of each word to uppercase
uppercase Transforms all characters to uppercase
lowercase Transforms all characters to lowercase
initial Sets this property to its default value.
inherit Inherits this property from its parent element.