Navigation Menu in IE

  • I’m having a problem with the way the navigation menu displays in IE9.

    When the window is re-sized, the button navigation for mobile devices shows, which is fine, but when the window is sized back to full screen after that, the menu bar displays as a vertical stack instead of horizontally across. Hitting F5 makes it go back to normal, but I’m wondering why this is happening and if there’s an easy way to fix it.

    I’m still developing my site so I can’t post a link, but it also appears to be happening on the Customizr demo site.

    Any help is appreciated!

Viewing 2 replies - 1 through 2 (of 2 total)

  • This is just a hunch. I have no idea if it will work or not (and I don’t have IE9 to test).

    Around lines 8695 or so in your <color>.css file in customizr/inc/css there are the following lines:

    .span1,
.span2,
.span3,
.span4,
.span5,
.span6,
.span7,
.span8,
.span9,
.span10,
.span11,
.span12,
img {
  -moz-transition: width 0.5s ease-in-out, left 0.7s ease-in-out, right 0.7s ease-in-out;
  -webkit-transition: width 0.5s ease-in-out, left 0.7s ease-in-out, right 0.7s ease-in-out;
  -o-transition: width 0.5s ease-in-out, left 0.7s ease-in-out, right 0.7s ease-in-out;
  transition: width 0.5s ease-in-out, left 0.7s ease-in-out, right 0.7s ease-in-out;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  -moz-transition: font-size 0.5s ease-in-out, left 0.7s ease-in-out, right 0.7s ease-in-out;
  -webkit-transition: font-size 0.5s ease-in-out, left 0.7s ease-in-out, right 0.7s ease-in-out;
  -o-transition: font-size 0.5s ease-in-out, left 0.7s ease-in-out, right 0.7s ease-in-out;
  transition: font-size 0.5s ease-in-out, left 0.7s ease-in-out, right 0.7s ease-in-out;
}

    Could you comment them out and see if that changes anything? I repeat, this is just a hunch and probably will not work. But it’s worth a try to see if IE9 is somehow getting “stuck” on the resizing animation.

    Thread Starter mfgk

    (@mfgk)

    Thanks for the response – I didn’t try it but I did manage to fix it after a bit of tinkering – not sure if this was the best way to do it, but it’s working in IE 9 and Chrome and Firefox so I’ll take it. I noticed a few other IE9 problems as well so here’s how I fixed it in case anyone finds it helpful. At this point I don’t care if it’s technically correct. I’m so ready to be done with IE.:

    .navbar-inner{
  filter:none;
  background-color:white;
  /* Makes the btn nav dropdown display in IE in smaller Windows*/
}
.collapse{
overflow: visible
  /* Makes the btn nav dropdown display in IE in smaller Windows*/
}

.nav-collapse.collapse {
display: inline-block;
*display: block;
  /* Keeps the Nav from re-sizing in IE9 and prevents it from stacking in IE7 */
}

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Navigation Menu in IE’ is closed to new replies.