Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • September 6, 2016 at 4:57 pm #682732
    Guenni007

    is there a possibility to have for the opended mega menu that the page background is darkend than. Similar to lightbox effect when the light-box is open the whole page has an dark semitransparent overlay

    i could change the box-shadow to extrem values – and it looks ok 

    #header .avia_mega_div {
    box-shadow: 10px 80px 2000px rgba(0, 0, 0, 0.8);
}

    i can see that the parent anchor gets the class “open-mega-a” via avia.js .

    it it possible to check if that class exists and than change some values of a div?
    The site has anyway an own child-theme header.php so i could place before opening wrap_all container something ( the preloader screen i placed there too)

    • This topic was modified 8 years, 4 months ago by Guenni007.
    September 10, 2016 at 4:24 am #684395
    Ismael

    Hey Guenter,

    Thank you for using Enfold.

    Create another container under the wrap_all container in the header.php file:

    
<div class='mega-bg'></div>

    Style it with this css:

    .mega-bg {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    position: absolute;
    display: none;
    z-index: 500;
}

    And then use the following code in the functions.php file:

    add_action('wp_footer', 'ava_new_custom_script');
function ava_new_custom_script(){
?>
<script type="text/javascript">
(function($) {
	function j() {
		var mega = $('.menu-item-mega-parent'),
			bg = $('.mega-bg');

		mega.on({
			mouseover: function() {
				bg.stop().fadeIn(100);
			},

			mouseleave: function() {
				bg.stop().fadeOut(100);
			}
		});
	}

	j();
})(jQuery);
</script>
<?php
}

    Best regards,
    Ismael

    September 10, 2016 at 8:33 am #684455
    Guenni007

    thanks – works great – only thing is i will add a transition that menu appearance and darken willl be synchronized –

    Thanks a lot !

    Edit : allthough i put in:

    			mouseover: function() {
				bg.stop().delay(500).fadeIn(100);
			},

    it looks a bit strange – but these means to split hairs here.

    the clou was that you put in the container in the wrap_all – i dont know that mega-parent option and – that made the trick possible ! ?

    • This reply was modified 8 years, 4 months ago by Guenni007.
    September 16, 2016 at 9:17 am #687339
    Ismael

    Hi,

    the clou was that you put in the container in the wrap_all – i dont know that mega-parent option and – that made the trick possible ! ?

    I’m sorry but what do you mean by “clou”? We added another container below the wrap_all container, hide it initially then display it when the mouse is over the mega menu item.

    Best regards,
    Ismael

    September 16, 2016 at 9:28 am #687342
    Guenni007

    yes thats what i did – but to put it in the wrap_all was the idea that made it easier to make the selection of the .mega-bg container

    <div id='wrap_all'>
    <div class='mega-bg'></div>

	<?php 
	…

    so it was a descendant (“far away child”)

    at the beginning of that i tried it myself with:

    <div class='dark_bg'></div>
<div id='wrap_all'>
	<?php 
	…

    but i could not handle it because .dark_bg was a far away sibling / Neighbour to the nav-containing #wrap_all

    i hope that on css4 the missing parent selektor will come (E! > F) :lol

    September 24, 2016 at 5:00 am #691069
    Ismael

    Hi,

    It’s easier if the “dark” container is inside because it can inherit the width and height of the wrap_all container. :)

    Best regards,
    Ismael

    October 8, 2016 at 7:22 am #696809
    Guenni007

    hi Ismael can you help me please on that here too: https://kriesi.at/support/topic/burger-menu-not-full-screen-and-on-the-right-side/

    October 10, 2016 at 4:11 pm #697425
    Yigit

    Hi!

    Replied to your other thread. Let us continue there :)

    Regards,
    Yigit

    October 11, 2016 at 6:01 pm #697987
    Guenni007

    :lol can’t see the wood for trees

    looks ok. http://webers-testseite.de/elegant

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.