css - Navbar not responsive on iPad, what to do? -

css - Navbar not responsive on iPad, what to do? -

i'm trying figure out how create navbar @ site http://lundinskatt.se resize on ipad mini on smaller screen google nexus 7. way shows whole menu "jumps" downwards , positions under logo. want responsive on smaller screens.

i'm sure easy prepare brain isn't working me today i've got inquire of guys if know should do??

best regards evelina

according css have

<div class="container-fluid" id="fav-nav-sm"> <div class="row-fluid"> <div id="fav-nav" class="span12"> <div class="navigation"> <div class="moduletable_menu"><ul class="nav menu"> <li class="item-101 current active"><a href="/">hem</a></li><li class="item-107"><a href="/verksamhetsomraden">verksamhetsområden</a></li><li class="item-108"><a href="/abonnemang">abonnemang</a></li><li class="item-110"><a href="/nyheter">nyheter</a></li><li class="item-109"><a href="/kontakt">kontakt</a></li></ul> </div> </div> </div> </div> </div>

this medium screens -because if @ css

@media (min-width: 768px) , (max-width: 1199px) { #fav-nav-sm { border-bottom: 1px solid #ddd; } #fav-header #fav-nav { display: none; } #fav-nav-sm #fav-nav { padding: 7px 0px 16px; float: none; } #fav-nav-sm .moduletable ul.nav.menu { float: none; } #fav-nav-sm .navigation { display: table; margin: 0 auto; } #fav-nav-sm .navigation .nav-pills { margin-top: 0; } }

these properties setting on menu between above mentioned breakpoints.

from question want have either desktop layout of menu or mobile layout(medium screens not needed-remove markup in html , respective styling css keeps code clean well).

now menu gone want show hamburger menu on top of logo.

change query on line 402 , 1085 query

@media (max-width: 1199px) { }

css ipad responsive-design navbar