Scholar Theme - Submenu Formatting Problem with IE8


I absolutely love this theme! I've been able to accomplish so much with it. I'm having a slight problem with IE8. When hovering over a nav topic, the submenu drops down. Most browsers extends the length of the submenu as far as required to accommodate the page name. However, IE8 seems to have a fixed length and therefore words get jumbled up where you can't understand what's written in many cases. Is there an easy fix? Link: If you test out in IE8 you'll see several different submenu titles jumbled up.

  • David Payne


    Thanks for responding. Yes, I see what you mean, but I think I have an explanation. With the demo theme all of the words/phrases in the submenus are limited to around a maximum of 10 or 11 characters. In other words, none of it approaches the right side where the width of the column would have to be expanded. If you look carefully at the menu on my site, when there are not enough characters to reach the edge everything looks fine. The only time words get jumbled is when more room is needed.


  • Tammie

    @David: There is a width limit but it should just wrap onto a new line and does in my testing. That is if there is a space for instance 'sdfhsdufhsdohfoshdf' would not wrap but 'this is a line' would. You can edit the CSS but it's a case of you do need to tell us what you may have edited too if this doesn't work.

    You want to be looking in header.php and this:

    <script type="text/javascript">
    jQuery(document).ready(function() {

    // Put all your code in your document ready area
    // Do jQuery stuff using $
    minWidth: 12, // minimum width of sub-menus in em units
    maxWidth: 27, // maximum width of sub-menus in em units
    extraWidth: 1 // extra width can ensure lines don't sometimes turn over
    // due to slight rounding differences and font-family
    }).superfish(); // call supersubs first, then superfish, so that subs are
    // not display:none when measuring. Call before initialising
    // containing tabs for same reason.

    See where you're saying min and max width of em on menus? You'd be changing that.

  • Tammie

    @David: Hmm maybe you need to change navigation.css also however in my testing just changing those variables worked. Have you done any modifications to those parts or anything? It really is em in the header and 20em is quite a wide amount... I'd suggest not going that far :slight_smile: I am leaning towards it being something site specific as I can't for the life of me replicate this. Can you remove plugins and maybe revert any changes to see if anything is impacting please. I'm thinking things like javascript here.

  • David Payne

    @Tammie: I have done some modification with the navigation.css but they have been slight mods. Perhaps this could be the issue. I don't remember changing anything substantive. Can you think of what lines I would focus on with the navigation.css to try to make it work? I think I'd like to try this before going the remove plugins route. By the way, do you mean to deactivate the plugins or remove the plugins?

  • Mason

    Hiya David,

    Tammie's out for a day or so.

    Deactivating the plugins would allow us to see if there's a conflict there. Alternatively you can always do this quickly by simply changing the names of the 'plugins' and 'mu-plugins' folders inside wp-content.

    Just do it temporarily to see if there are any changes with the site. After you've tested you can change the folder names back. If this does correct your issue then we just have to figure out which plugin is the culprit.

    Let us know how it goes and I'll try to help ya get this sorted while Tammie's away.


  • David Payne

    @tammie @masonjames

    Thanks so much for your help and patience!

    I tried the plugin deactivation route. That didn't work. Then, I replaced the navigation.css file that I had modified with a fresh version. That did work! Thanks!

    Since, I have modified the navigation.css file again this time making sure to test in IE8 browser as I go. I've got it just the way I want it except for one thing... I can't figure out how to eliminate the small gap that appears between the main nav and the submenu (if you'd like to see just hover over one of the main nav areas on the home page: This is something that occurs in all browsers and is not just a problem specific to IE8. The only thing I've modified in the css file is at line 64:

    .sf-menu a {
    padding: 13px;

    I changed the padding from a default of 19px to 13px to scrunch things down a bit and create more room in the nav bar. Now, is there an easy way to get rid of that little gap?

    Almost there, so close!