javascript - Menu mobile not work in internet explorer -
i have problem menu mobile in internet explorer not work - still have menu desktop viev. in chrome, firefox, opera good. mistake , can fix it?
function myfunction() { var x = document.getelementbyid("mytopnav"); if (x.classname === "topnav") { x.classname += " responsive"; } else { x.classname = "topnav"; } }
@media screen , (max-width:579px) { ul.topnav li {display: none;} ul.topnav li.icon { display: inline-block;} } @media screen , (max-width:579px) { ul.topnav.responsive {position: relative;} ul.topnav.responsive li.icon { position: absolute; right: 0; top: 40px; } } ul.topnav.responsive li { float: none; display: inline; }
<nav id="menu"> <ul class="topnav" id="mytopnav"> <li><a class="active" data-scroll-nav='1'>home</a></li> <li><a data-scroll-nav='2'>text1</a></li> <li><a data-scroll-nav='3'>text2</a></li> <li><a data-scroll-nav='4'>text3</a></li> <li><a data-scroll-nav='5'>tex4</a></li> <li class="icon"> <a href="javascript:void(0);" onclick="myfunction()"><i class="fa fa-bars"></i></a> </li> </ul> </nav>
after reviewing site believe have parsing errors. browsers ignore them , work-around bugs, why works on chrome example, ie little bit more picky on that.
specifically, have quite few brackets not closed. can use service http://csslint.net/ identify breaklines.
there's nothing else wrong css bug .icon
never appears due portion of css (the media query sets display: inline-block
) not being interpreted in ie still reads display: none;
.
Comments
Post a Comment