for the menu links : maybe you set for all links the content of the menu as alt attribute
this comes as the code above to child-theme functions.php:

function set_menu_text_as_alt(){
?>
<script>
(function($){
		$('#avia-menu .menu-item a').each(function(){
			var menuName = $(this).find('>.avia-menu-text').text();
			$(this).attr('alt', menuName);
		});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'set_menu_text_as_alt');

try first without $(document).ready(function() this must work too

i have to see your site to give advice

and what kind of feature you like to have?

Sorry – i think this will work – but with my method you got that little message posibility in the gradient section and –
you can have all gradients (even images) in that second color-section without making allways another png file for it.

create your layout in this way:
you need for it two color-sections
the first color-section with your image and the content – i give a custom class to it:
background-with-content
the following second color-section – this is only for the gradient ( and maybe one short info text) with custom class:
background-with-message

the image and the gradient could be done in the alb element itself as you know allready.

put this to your quick css:

.avia-section.background-with-content {
  border-bottom-right-radius: 200px;
  z-index: 5;
  position: relative;
}

.avia-section.background-with-message {
  position: relative;
  margin-top: -200px;
  z-index: 0;
}

.avia-section.background-with-message .container {
    height: 300px !important
}

.avia-section.background-with-message .container .content {
    vertical-align: bottom;
    padding-bottom: 20px !important
}

looks this way: https://webers-testseite.de/rounded-background-gradient/

Edit: on very small screens you had to make a rule for that message in the gradient container.
padding-bottom or font-size etc.

if you drag and drop that ALB ( Advanced Layout Builder ) Element ( Columns ) to your layout – the default setting of border is set to : none
click to enlarge:

If there was a setting it will end up in an inline css:
( so open one column set on that page and navigate to that tab called: “Border” and see if there are entries )

and you got this rule:

.main_menu {
    right: 20%;
}

so i guess thats why you believe that content is too small.
Your content width is at 1310px

f.e. if there are media queries – often the closing bracket is missing or there are additional ones:

you have :

.responsive .logo a {
 vertical-align:top
} /*** one curly bracket too much ***/
}

but the opened media query is closed before :

@media only screen and (min-width:990px) {
 .mobile_only {
  display:none !important
 }
}

etc. pp

same as here: https://kriesi.at/support/topic/grid-row-boxes-dont-line-up/

?

by the way a horrible example – not responsive at all

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.