WordPress.org

Support

Support » Themes and Templates » Pachyderm » [Theme: Pachyderm] Drop down menu not working properly on IE

[Theme: Pachyderm] Drop down menu not working properly on IE

  • Hi, I’m having problem with the drop down menu.
    It seems there’s a conflict with IE browser. Tried on IE 9.
    You can see the sub menu on the drop down but you can’t get to click it when you hover to the sub menu as it disappear quickly.

    I tried viewing your demo on IE. The drop down got hide behind the post content.

    I have tried to rectify it such as on CSS and looking at the HTML codings but can’t find where and what went wrong.

    I have no problem with firefox and chrome.

    I really like your theme and hope you can do something about.
    Or you can tell me what to do?

    Thanks.

    http://wordpress.org/extend/themes/pachyderm/

Viewing 15 replies - 1 through 15 (of 21 total)
  • Theme Author Caroline Moore

    @sixhours

    I’m not able to reproduce this in IE 9 — the submenus are accessible, stay open, and are not hidden behind the post content. Are you using the most recent version of the theme?

    I can confirm this problem on IE8 with the latest version of the theme. The drop down menus are working fine with Firefox, in IE the drop down menu sometimes disappears quickly as described by archampion.

    It seems to stay open if you move the cursor very fast down: the problem ssems to be the white space between the menu item and the entries of the drop down menu. if the cursor is over this white space for too long, the drop down menu will close again.

    We can help your website work in IE8, but do understand that IE compatibility beyond version 9 is too much to ask from a free theme vendor. Create/ continue your own thread for support.

    I just made a test with IE9. Same problem in IE9 and the latest version of the theme.

    Where is your website?

    May I ask whether you have a section of the dashboard named, “Custom CSS” or “Jetpack”? Or are you using a Child Theme?

    I am not using any of these plugins and I am also not using a child theme

    May you download and install this Custom CSS Manager plugin? It holds your CSS modifications so it is separate from the theme but still applies to it; meaning you can update your theme and your CSS modifications won’t be erased.

    You can resolve this in either two ways; move the submenu upwards (closer to the actual menu) or extend the hyperlink so it has a higher height (without making it look different). Which way would you prefer?

    I just installed this plugin.

    I would prefer the second solution, extending the hyperlink.

    In the Custom CSS section of the dashboard, enter this;

    .navigation-main li a,
    .navigation-main li:hover > a {
     background: none;
     display: block;
    }
    
    .navigation-main li:hover {
     background: #ed7b7b;
    }
    
    .navigation-main li a {
     color: white;
     margin: 0 3px;
     padding: 3px 5px;
     display: block;
     height: 27px;
     font-size: 12px;
     font-size: 1.2rem;
     text-decoration: none;
     text-transform: uppercase;
    }
    
    .navigation-main li {
     background: #f15d5d;
     display: block;
     height: 25px;
    }
    
    .navigation-main li li {
     margin: 3px 0;
    }
    
    .navigation-main li li a {
     padding: 3px 5px;
     margin: 0;
     height: auto;
    }

    Uh-oh, that’s not going to work for your long-worded submenu links.

    I added the code the custom CCS.

    It seems to fix the issue but it also seems to limit the height of each submenu-entry to one line. A few of my submenu-entries are too long for one line and now are now longer visible, e.g. the first one “Home” -> “Funktion dieser Seite”. The word “Seite” is no longer visible.

    Try replacing that code with this;

    .navigation-main .menu > li,
    .navigation-main .menu > ul li {
     height: 25px;
    }
    
    .navigation-main li a,
    .navigation-main li:hover > a {
     background: none;
     display: block;
    }
    
    .navigation-main li:hover {
     background: #ed7b7b;
    }
    
    .navigation-main li a {
     height: 27px;
    }
    
    .navigation-main li {
     background: #f15d5d;
    }
    
    .navigation-main li li {
     margin: 3px 0;
    }
    
    .navigation-main li li a {
     padding: 3px 5px;
     margin: 0;
     height: auto;
    }

    Edit: Updated to work on this demo site.
    Edit: Code re-factored.

    updated with the new code

    looks fine in IE9

Viewing 15 replies - 1 through 15 (of 21 total)
  • The topic ‘[Theme: Pachyderm] Drop down menu not working properly on IE’ is closed to new replies.
Skip to toolbar