Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #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?

    #1048487

    Hey 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,
    Mike

    #1048589

    Yeah, 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!

    #1048755

    Hi,
    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,
    Mike

    #1048995

    Yay – 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?

    #1049010

    Sooooo – 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?

    #1049023

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

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