Return to previous page

Page Darkening on Hover on .menu-wrapper vs .secondary-menu-wrapper

This topic has 11 replies, 2 voices, and was last updated 5 years, 5 months ago ago by Rose Tyler

thisisbolo

Participant

November 1, 2018 at 13:36

Hi –

I’m trying to trigger the page hover on the .menu-wrapper vs. the .secondary-menu-wrapper. I tried swapping out the instances of .secondary-menu-wrapper with .menu-wrapper in theme.js below but it doesn’t seem to trigger it. Am I missing something?

        secondaryMenu: function() {

            $('.et-secondary-visibility-on_click').on('click', '.secondary-title', function() {
                secondaryShowHide();
            });
            $('.et-secondary-visibility-on_hover.et-secondary-darkerning-on').on('mouseover', '.secondary-menu-wrapper', function() {
                secondaryShow();
            });
            $('.et-secondary-visibility-on_hover.et-secondary-darkerning-on').on('mouseleave', '.secondary-menu-wrapper', function() {
                secondaryHide();
            });

            var secondaryShowHide = function() {
                if($('body').hasClass('et-secondary-shown')) {
                    secondaryHide();
                } else {
                    secondaryShow();
                }
            };

            var secondaryShow = function () {
                $('body').addClass('et-secondary-shown');
            }
            var secondaryHide = function () {
                $('body').removeClass('et-secondary-shown');
            }

            $(document).on('click touchstart', function(event) {
                if( !$(event.target).closest('.secondary-menu-wrapper').length ) {
                    if($('body').hasClass('et-secondary-shown')) {
                        $('body').removeClass('et-secondary-shown');
                    }
                }
            })
        },

Copied

10 Answers

thisisbolo

Participant

November 1, 2018 at 13:42

Hang on, I figured it out. I was doing it on the wrong file. Change has to be done on the minified js file ‘etheme.min.js’. Ok, so now that I’ve figured this out, how would you recommend I apply this in my child these to not affect the core file?

Copied

Rose Tyler

Support staff

November 1, 2018 at 15:54

Hello,

1) Please describe the desired result in more details for better understanding and provide your site URL.
2) You can create etheme-child.js file with your code in child theme folder then add http://prntscr.com/ld5nxb into xstore-child/functions.php file
wp_enqueue_script('et-child-js', get_stylesheet_directory_uri().'/etheme-child.js', array(),false,true);

Regards

Copied

thisisbolo

Participant

November 4, 2018 at 02:52

Hi Rose. I’ve provided details below.

Copied

Rose Tyler

Support staff

November 5, 2018 at 10:24

Hello,

Please add this code in style.css of child theme:

body:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	z-index: -1;
	display: none;
	animation: slideOut;
}
.menu-item-hovered:before {
	display: block;
	z-index: 1002;
	animation-name: fadeIn;
	animation-duration: 0.2s;
}
.menu-item-hovered .page-wrapper {
	z-index: auto;
}
.menu-item-hovered .header-wrapper {
	z-index: 1003;
}

and this:

jQuery(document).ready(function($){
   $('.menu-wrapper>.menu-main-container>.menu>.item-with-block').on('mouseover', function() {
   	$('body').addClass('menu-item-hovered');
   });
   $('.menu-wrapper>.menu-main-container>.menu>.item-with-block').on('mouseleave', function() {
   	$('body').removeClass('menu-item-hovered');
   })
});

into etheme-child.js file
https://gyazo.com/86fb2cb17c8a326f246c8bf30edd6ab4

Regards

Copied

thisisbolo

Participant

November 6, 2018 at 07:20

This is great Rose. Thank you for your help. Once again!

Copied

thisisbolo

Participant

November 6, 2018 at 07:49

Hi Rose. I noticed that this doesn’t darken the whole page. As you scroll down, it only cover’s the height of the static block. What do I need to adjust in the css to push it full height?

Copied

Rose Tyler

Support staff

November 6, 2018 at 08:25

Hello,

Please add this code:

.menu-item-hovered {
    position: relative;
}

Regards

Copied

thisisbolo

Participant

November 6, 2018 at 18:44

Did the trick.

Copied

thisisbolo

Participant

November 6, 2018 at 18:47

Here’s the final solution.

XStore – How to make page darkening happen on menu (non-secondary menu) that have static blocks as mega-menu dropdown

CSS

body:before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	z-index: -1;
	display: none;
	animation: slideOut;
}
.menu-item-hovered:before {
	display: block;
	z-index: 1002;
	animation-name: fadeIn;
	animation-duration: 0.2s;
}
.menu-item-hovered .page-wrapper {
	z-index: auto;
}
.menu-item-hovered .header-wrapper {
	z-index: 1003;
}

.menu-item-hovered {
    position: relative;
}

jQuery(document).ready(function($){
   $('.menu-wrapper>.menu-main-container>.menu>.item-with-block').on('mouseover', function() {
   	$('body').addClass('menu-item-hovered');
   });
   $('.menu-wrapper>.menu-main-container>.menu>.item-with-block').on('mouseleave', function() {
   	$('body').removeClass('menu-item-hovered');
   })
});

Copied

Rose Tyler

Support staff

November 7, 2018 at 08:54

Hello,

Great. Thank you for letting us know.

Regards

Copied