by the way – if this is the mega menu for your blog – each item got his own featured image ?

you can have infront of each mega-menu li your featured image
see here on a test page: https://webers-testseite.de/lepper/
look to “Was wir bieten” Mega Menu

it is a code from ismael that works perfectly – see here:
https://kriesi.at/support/topic/on-mega-menu-show-in-front-of-list-points-the-featured-image/#post-688912

after you only have to style these little images ! : .main_menu .avia_mega_div .attachment-thumbnail.size-thumbnail.wp-post-image
on that line : if ($args->menu->name != 'Main Menu') return $sorted_menu_objects; you must enter the name of your main menu

This method is based on the flex-box modell and the “stickyness” is allways in relation to its parent container.
See testpage here: https://webers-testseite.de/sticky-elements/
So see first if this fits your needs – otherwise you don’t need to read further.

well it will be better to see any live page to give better advice – but here we go.
a good method will be position sticky ( only Opera mini and IE11 do not support position: sticky )

it is important that on this method the default values for these elements are changed to overflow : visible:

.responsive body#top {
    overflow-x: visible;
}

#wrap_all {
    overflow: visible;
}

if you only have that on some pages it might be usefull to limit it to only these pages by f.e.:

.responsive body#top.page-id-123 {
    overflow-x: visible;
}

.page-id-123 #wrap_all {
    overflow: visible;
}

the sticky elements ( columns f.e.) stick if they have a given distance to top – and will scroll when the parent container scrolls out of the scene.
f.e. you can have on that column a menu etc.

A useful setup would be to have a color-section as surrounding container – give to that color-section a custom class:
sticky-parent
Place your columns to this color-section – the columns you like to be sticky give them a custom class:
sticky-element

on responsive case you don’t need that – because columns then stand among each other. – so we can place the css in a media query:

@media only screen and (min-width: 767px){
	.sticky-parent .entry-content-wrapper {
	  display: flex;
	  justify-content: space-between;
	  align-items: flex-start;
	}

	.sticky-parent .entry-content-wrapper:before,
	.sticky-parent .entry-content-wrapper:after {
		display:none
	}

	.sticky-element {
	    position: -webkit-sticky !important;
	    position: sticky !important;
	    top: 140px;
	    align-self: flex-start;
	    min-width: 30%;
	}
}

you can play with top position and min-width here – because even if the columns are 1/3 the flex-model rules here the width !

Warum fügst du es nicht als Checkbox in dein Kontakt Element ein? – und setzt es dann auf Pflichtfeld (ohne Preselection)
oder habe ich dein Anliegen falsch verstanden? Was willst du damit erreichen? Wenn die Checkbox Pflicht ist, ist doch der Vorschrift genüge getan. oder?

Da hast du dann gleich alles was nötig ist . In das Form Element Label kannst du nämlich html code einsetzen:

Ich habe die <a href="/datenschutzerklaerung/">Datenschutzerklärung</a> gelesen und bin mit der entsprechenden Verarbeitung meiner Daten einverstanden.

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, 3 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