-
AuthorPosts
-
December 22, 2018 at 1:17 am #1048465
So, this request was previously resolved but doesn’t work with the latest version of the theme:
https://kriesi.at/support/topic/z-index-question/
function change_logo_zindex_on_menu_hover(){
?>
<script>
(function($){
$(function() {
$(‘.main_menu li a’).hover(function() {
$(‘.logo’).css(‘z-index’, ‘0’);
}, function() {
$(‘.logo’).css(‘z-index’, ‘1’);
});
});
})(jQuery);
</script>
<?php
}
add_action(‘wp_footer’, ‘change_logo_zindex_on_menu_hover’);Essentially I changed the z-index of the logo so it would be clickable but when you are all of the way at the top of the page and you hover over a dropdown menu it goes underneath the logo making a few items un-clickable.
Did something change in the documentation with the latest version of the theme?
December 22, 2018 at 6:07 am #1048487Hey Andrea,
I took a look at your site, and I don’t believe anything changed with the upgrade, I do notice that you have a jQuery error:Cannot read property 'TemplateType' of undefined at Object.s [as initCallback] (VM90 bundle_horiz.js
I assume you have tried disabling your plugins?
I see the menu still goes over the logo, and the only issue is that the top of the logo is not clickable, right?
Can you please include a admin login in the private content area so we can take a closer look.Best regards,
MikeDecember 22, 2018 at 6:50 pm #1048589Yeah, I know I’ve got a lot going on trying to center the logo, overlap the content below it, not have the menu below it overlapped, swap it out as you scroll, and make it clickable throughout. It was working for a bit so it feels like I’m missing something small.
Any insight would be great!
December 23, 2018 at 5:59 am #1048755Hi,
Sorry for the late reply, I took a look at the css and the jQuery and updated both, for the jQuery I changed the at rest z-index to 100 so that it would be on top of the menu div and would be clickable, it was 1 which was not high enough.
For the css I commented out two z-index rules, one at line 50 that made the logo 1000, and also on line 347 which was -1000
So now all for the z-index for the logo is controlled by the jQuery script, and seems to work correctly now please check.I note that I didn’t track down the jQuery error from above it only showed once while I worked on this, and then was not there on my next reload, you may want to keep an eye out for it.
Best regards,
MikeDecember 24, 2018 at 3:55 pm #1048995Yay – this worked fantastically. My only issue now is the three columns columns under spirits expands beyond the page. Is there some helpful CSS I could implement to make each column more narrow?
December 24, 2018 at 9:04 pm #1049010Sooooo – you are helping me out a ton. Now it’s just a bit tweaky – could we make it so when you are hovering over the menu and not JUST on a link that this switch can take place?
December 25, 2018 at 4:56 am #1049023Hi,
To make the menu columns narrow, I added this css to your Quick CSS and set the width to 600px
Please try adjusting to suit:#top #header .avia_mega_div { max-width: 600px !important; }
To make the logo not so tweaky while hovering on the menu, I added the sub-menu as a hover trigger to the script and I added a delay to reset the logo z-index:
function change_logo_zindex_on_menu_hover(){ ?> <script> (function($){ $(function() { $('.main_menu li a, ul.sub-menu').hover(function() { $('.logo').css('z-index', '0'); }, setTimeout(function() { // on mouseout, reset $('.logo').css('z-index', '100'); }, 2000); }); })(jQuery); </script> <?php } add_action('wp_footer', 'change_logo_zindex_on_menu_hover');
Please clear your browser cache and check.
Have a Merry Christmas.Best regards,
Mike -
AuthorPosts
- You must be logged in to reply to this topic.