Twenty twelve submenu not working in Internet Explorer
-
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 https://allthatshealing.com.au
-
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 );
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!
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 https://diffchecker.com .
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.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 ??
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; }
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.
Why are you moving it with CSS? You should be moving it in the header.php code – see:
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: https://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%; }
Oops, posted that before I saw your reply. I’ll try that, WPyogi. Thanks!
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.
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?
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.
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 ??
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.
- The topic ‘Twenty twelve submenu not working in Internet Explorer’ is closed to new replies.