WordPress.org

Ready to get started?Download WordPress

Forums

Twenty twelve submenu not working in Internet Explorer (22 posts)

  1. AllThatsHealing
    Member
    Posted 1 year ago #

    I'm using the Twenty Twelve theme and while the submenu/dropdown menu works fine in Firefox & Chrome, it doesn't work in Internet Explorer (IE9).

    The menu appears normally in IE but as soon as you to try to click on a link, it disappears. You'll see it on http://allthatshealing.com.au

  2. leejosepho
    Member
    Posted 1 year ago #

    With Twenty Twelve being "mobile-first", IE got overlooked a bit. I presently have someone willing to work on that for me in my Child Theme, and I will try to post back here if/after all of that has been resolved. But for now, here is how I am already calling a custom ie.css:

    /**
     * remove twentytwelve-ie css must use priority greater than 10
     * then add our special version in child theme's css folder
     */
    function mytheme_dequeue_styles() {
    	wp_dequeue_style( 'twentytwelve-ie' );
    }
    add_action( 'wp_enqueue_scripts', 'mytheme_dequeue_styles', 11 );
    
    function mytheme_equeue_styles() {
    	global $wp_styles;
    	wp_enqueue_style( 'mytheme-ie', get_stylesheet_directory_uri() . '/css/ie.css', array( 'twentytwelve-style' ), '1.0' );
    	$wp_styles->add_data( 'mytheme-ie', 'conditional', 'lt IE 10' );
    }
    add_action( 'wp_enqueue_scripts', 'mytheme_equeue_styles', 11 );
  3. AllThatsHealing
    Member
    Posted 1 year ago #

    Thanks for the answer, leejosepho. I'm surprised there aren't more on this forum posting about the same problem. I searched before posting my cry for help but couldn't find any :(

    I tried the code as is but it didn't work. Or am I meant to edit your custom code to suit? I'm not great at css so if anyone can help, you'll be my hero!

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

    As you can see, the issue is not apparent on the theme's demo website.

    You need to deactivate plugins to explore whether any are responsible.

    Then, if none are, you need to sit down and work through what CSS changes are different to your menu compared to the theme's original stylesheet. Use http://diffchecker.com .

  5. leejosepho
    Member
    Posted 1 year ago #

    That code I posted is what I have in functions.php to call a custom style sheet for IE: get_stylesheet_directory_uri() . '/css/ie.css'. To make that style sheet for the function to call, you can begin by copying the css folder (and its enclosed ie.css file) from Twenty Twelve into your Child Theme, then make your IE modifications there. But to fix things like the menu issue you have mentioned, I have had to hire someone who knows both Twenty Twelve and IE since neither am I a coder.

  6. AllThatsHealing
    Member
    Posted 1 year ago #

    Thanks for all the suggestions. I deactivated my child theme & used the original twenty-tweleve style.css & the submenu in IE worked like a dream! Now gotta go work out what I've messed up in my child theme's css that IE doesn't like :)

  7. AllThatsHealing
    Member
    Posted 1 year ago #

    Ahah! Worked it out! It was my code to move the main menu below the header. Can someone tell me what's wrong with it?

    #masthead {position: relative;}
    #site-navigation {
        position: absolute;
        top: 190px;
        left: 200px;
    }
  8. leejosepho
    Member
    Posted 1 year ago #

    I do not know this with absolute certainly, but I suspect your code is fine and IE needs some additional styling after the NavBar has been moved...and that might be because media queries are involved and IE does not know what to do with them.

    Edit: Put your code back in place and compare your site closely in IE and Firefox and I believe you will see other differences also.

  9. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Why are you moving it with CSS? You should be moving it in the header.php code - see:

    http://wordpress.org/support/topic/how-to-move-menu-below-header-image-in-twenty-twelve-theme?replies=39

  10. AllThatsHealing
    Member
    Posted 1 year ago #

    Thought I might give a running update as I go :)

    I just copied the masthead code from another website I made and pasted it into this one. The submenu works in the other site in IE but it still doesn't in this one. Could it be some kind of clash with the code & the layout of my header? I deactivated the few plugins I have and it didn't help. Below is the full code in my child theme's style.css (which includes the masthead code which is messing up IE)

    /*
    Theme Name:     2012CHILD
    Theme URL:      http://allthatshealing.com.au/
    Template:       twentytwelve
    */
    
    @import url("../twentytwelve/style.css");
    
    /*move main menu below header*/
    #masthead {position: relative;}
    #site-navigation {
        position: absolute;
        top: 190px;
        left: 200px;
    }
    
    /*remove image borders*/
    .entry-content img,
    .comment-content img,
    .widget img,
    img.header-image,
    img.wp-post-image {
        border-radius:0;
        box-shadow:0 0 0 rgba(0,0,0,0);
    }
    
    /*remove white space above header*/
    .main-navigation {
        margin-top: 0;
        text-align: center;
    }
    
    /*remove page titles*/
    .page .entry-title { display: none; }
    
    /*remove proudly supported by*/
    .site-info {   display: none;}
    
    /*remove white space between body content and menu*/
    .site-content {
    margin-top: -20px !important;
    }
    
    /*increase width of page*/
    .site {
        margin: 0 auto;
        max-width: 72.5714rem;
        overflow: hidden;
    }
    
    /*reduce margin at top of page*/
    body .site {	margin-top: 1.5rem;
    		margin-bottom: 1rem;
    		box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
    	}
    
    /*FONTS*/
    .main-navigation li a:hover {
    color: #0da71c;
    }
    .main-navigation li a {
    color: #000000;
    }
    
    /*Add 3 column footer widgets. NB: add footer.php file to child theme*/
    .widget-area .widget h3 {
      margin-bottom:0;
    }
    
    #footerwidgets {
     width:100%;
    }
    #footerwidgets p {
     padding-bottom: .5em;
    }
    #footerwidgets li, #footerwidgets p  {
     padding-bottom: .5em;
     font-size:80%;
     line-height:1.1em;
    }
    #footer-left {
     width:30%;
     float:left;
     padding-right:2.5%;
    }
    #footer-middle {
     width:28%;
     float:left;
     padding-left:4%;
     padding-right: 2%;
    }
    #footer-right {
     width:30%;
     float:right;
     padding-left:3%;
    }
  11. AllThatsHealing
    Member
    Posted 1 year ago #

    Oops, posted that before I saw your reply. I'll try that, WPyogi. Thanks!

  12. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Happens to me too :)! The other thing to be aware of with twentytwelve is that it's coded mobile first - so CSS code for full-size screens may need to be wrapped in a media query - look at the regular stylesheet to see how that's set up.

  13. AllThatsHealing
    Member
    Posted 1 year ago #

    Brilliant, WPYogi! That fixed it!!

    So now if I want to move the menu to a certain position (in technical terms: to the right a bit and up a tad), do i do that in the style.css or still in header.php?

  14. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Just CSS probably should be fine - but you shouldn't need to use relative or absolute position - that gets kinda tricky especially with a responsive site. But you probably do need to use a media query -

    /* =Media queries
    -------------------------------------------------------------- */
    
    /* Minimum width of 600 pixels. */
    @media screen and (min-width: 600px) {
    ...
    
    }

    See how that works - I can look at it - but I'm about to be off for a while so it'll be a bit later.

  15. AllThatsHealing
    Member
    Posted 1 year ago #

    Would love you to look at it later, if you could. I'll have a play with it in the mean time & see what I manage to resolve. The media query thingy is new to me so I might go get acquainted with that first :)

  16. AllThatsHealing
    Member
    Posted 1 year ago #

    Not sure if it's the right thing to do, but I resorted to brute force :)

    .main-navigation ul.nav-menu {
        background: none repeat scroll 0 0 #fff;
        padding: 0 0 0 100px;
    }

    What I'd really like to do is to move it up so the bottom of the menu is level with the base of the tree logo.

  17. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Seems to be okay and resizing seems fine too - but there are some mark-up errors on your page that you may want to check on:

    http://validator.w3.org/check?uri=http%3A%2F%2Fallthatshealing.com.au%2F&charset=%28detect+automatically%29&doctype=Inline&group=0

    I didn't look at them closely, but just FYI.

    The site is really nice, BTW.

  18. AllThatsHealing
    Member
    Posted 1 year ago #

    Thanks so much for that - Much appreciated!
    Managed to get the errors down to 7. They mostly relate to the font elements in the text widget and accuse me of not using CSS instead :)

  19. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    Yeah, some errors aren't really errors or don't cause problems, so don't sweat them :). And some CSS ones are unavoidable when you have browser specific code. Looking good :).

  20. geologist
    Member
    Posted 1 year ago #

    This is a vote of THANK YOU for this thread. All That Heals said he hasn't seen many posts about problems with IE in Twenty Twelve Child Theme. I'm having them also.

    I also switched my header image and navigation menu but did it in the header.php file. I don't think that's any problem.

    I THOUGHT, the problem was that the IE style sheet in the Child Theme ONLY was being read and the main style sheet with 95% of the style was being ignored. Maybe not.

    In addition to the menu problems my header image is not centering and I've lost my background image. All is working fine in other Browsers.
    website:

  21. geologist
    Member
    Posted 1 year ago #

  22. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    @geologist - please start your own thread per

    http://codex.wordpress.org/Forum_Welcome#Where_To_Post

Topic Closed

This topic has been closed to new replies.

About this Topic