WordPress.org

Ready to get started?Download WordPress

Forums

Pachyderm
Drop down menu not working properly on IE (22 posts)

  1. archampion
    Member
    Posted 2 years ago #

    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/

  2. Caroline Moore
    Member
    Theme Author

    Posted 2 years ago #

    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?

  3. sebo.h
    Member
    Posted 1 year ago #

    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.

  4. Andrew
    Forum moderator
    Posted 1 year ago #

    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.

  5. sebo.h
    Member
    Posted 1 year ago #

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

  6. Andrew
    Forum moderator
    Posted 1 year ago #

    Where is your website?

  7. sebo.h
    Member
    Posted 1 year ago #

  8. Andrew
    Forum moderator
    Posted 1 year ago #

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

  9. sebo.h
    Member
    Posted 1 year ago #

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

  10. Andrew
    Forum moderator
    Posted 1 year ago #

    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?

  11. sebo.h
    Member
    Posted 1 year ago #

    I just installed this plugin.

    I would prefer the second solution, extending the hyperlink.

  12. Andrew
    Forum moderator
    Posted 1 year ago #

    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;
    }
  13. Andrew
    Forum moderator
    Posted 1 year ago #

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

  14. sebo.h
    Member
    Posted 1 year ago #

    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.

  15. Andrew
    Forum moderator
    Posted 1 year ago #

    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.

  16. sebo.h
    Member
    Posted 1 year ago #

    updated with the new code

    looks fine in IE9

  17. Andrew
    Forum moderator
    Posted 1 year ago #

    :) Have a good weekend.

  18. sebo.h
    Member
    Posted 1 year ago #

    thanks a lot for your help

    have a good weekend, too

  19. Andrew
    Forum moderator
    Posted 1 year ago #

    @Caroline Moore
    Perhaps you could adopt this resolution? The issue is apparent on the theme's demo site.

    Just a suggestion.
    Thanks,
    Andrew.

  20. Caroline Moore
    Member
    Theme Author

    Posted 1 year ago #

    I'll take a look at this, Andrew, thank you!

  21. Caroline Moore
    Member
    Theme Author

    Posted 1 year ago #

    Will be fixed in the next version! Changing the position of the sub-menu UL should do it.

    For everyone else, as a temporary patch until the latest version is approved, you can change line 1259's value in style.css to 1.65em.

  22. Andrew
    Forum moderator
    Posted 1 year ago #

    Cool :)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags