Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • November 25, 2018 at 9:26 pm #1037462
    CurlyHost

    Hey guys,

    So I have a site with a logo that is centered and a big old mega menu.

    Because of the way I centered the logo there is a large section of it that is un-clickable. I added this CSS but then it made it so the mega menu went underneath the logo when hovered:

    .html_header_top.html_logo_center .logo {
    z-index: 10;
    }

    Is there another way you can think of to make the logo linkable but also make the mega menu underneath it go over top of it?

    Thanks!

    November 26, 2018 at 2:58 am #1037513
    Mike

    Hey Andrea,
    Please include the url to the page in question so we can take a closer look.

    Best regards,
    Mike

    November 26, 2018 at 6:37 pm #1037703
    CurlyHost

    Sorry,

    Home

    Maybe there’s a better way to do a centered menu than negative top margin and absolute widths from each other.

    Are there other methods I’m not aware of?

    Thank you!

    November 27, 2018 at 5:53 am #1037913
    Mike

    Hi,
    Thank you for the link, the logo and menus seem to work correctly, even when they are are over the top of the logo.
    I’m not sure I understand what you would like to change about this.
    It is necessary to use the negative margins to align the logo in the center.

    Best regards,
    Mike

    November 27, 2018 at 6:36 pm #1038118
    CurlyHost

    Sorry, let me add my CSS back in so you can see.

    When this isn’t there there is like 75px of the logo that is un-clickable because it gets overlapped by the menu below it.

    .html_header_top.html_logo_center .logo {
    z-index: 10;
    }

    http://dev15.curlyhost.com/

    Check it out now.

    November 29, 2018 at 7:59 am #1038819
    Rikard

    Hi,

    Thanks for that, though the whole logo is clickable on my end as well. If the CSS works, then why not keep it?

    Best regards,
    Rikard

    November 29, 2018 at 5:11 pm #1039041
    CurlyHost

    When you hover over any of the menu items the sub-menu goes under the logo and makes those links unclickable… I want the drop down links (especially the spirit links) to go over the menu so they are clickable. Does that make sense?

    November 30, 2018 at 10:18 am #1039261
    Vinay

    Hi,

    I checked the submenu links on Windows Chrome browser and I was able to click the links without any issue.

    If you still have any issue please clear the cache first.

    How to clear the cache

    If the issue persists, get back to us with the browser and device info on which you have this issue.

    Best regards,
    Vinay

    November 30, 2018 at 9:24 pm #1039427
    CurlyHost

    Please note that when you scroll down the logo changes to a more narrow version. When you are not scrolled down there is a logo that overlaps the section below it and the menu goes under the logo.

    December 1, 2018 at 3:42 pm #1039655
    Mike

    Hi,
    Try adding this code to the end of your functions.php file in Appearance > Editor:

    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');

    Please see the screenshot in Private Content area.

    Best regards,
    Mike

    December 1, 2018 at 5:48 pm #1039703
    CurlyHost

    Perfect!!!
    Thank you so much for your help!

    December 1, 2018 at 6:50 pm #1039712
    Mike

    Hi,
    Glad we were able to help, we will close this now. Thank you for using Enfold.

    For your information, you can take a look at Enfold documentation here
    For any other questions or issues, feel free to start new threads under Enfold sub forum and we will gladly try to help you :)

    Best regards,
    Mike

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Z-Index Question’ is closed to new replies.