當屏幕尺寸正在減小時遇到導航欄問題

我有一個響應式導航欄。當屏幕尺寸稍微減小時，最後一個li會轉到其他li下的下一行。我應該怎麼做才能解決它，因此它不會移動到其他菜單元素下的下一行？當屏幕尺寸正在減小時遇到導航欄問題

HTML代碼：

<nav class="cd-main-nav-wrapper mainNav"> 
    <ul class="cd-main-nav"> 
    <li style="margin-right:none;" class="logoNavPos"> 
     <a href="index.html"> 
     <img src="pic/logo1.jpg" alt="" class="desktopLogo"> 
     </a> 
    </li> 
    <li class="current_page_item"> 
     <a href="index.html">خانه</a>    </li> 
     <li><a href="pages/product.html">مزایای بیمه عمر</a></li> 
     <li><a href="pages/ourBranches.html">بیمه عمر و سرمایه گذاری</a></li> 
     <li><a href="pages/Catalogue.html">پرسش های متداول</a></li> 
     <li><a href="pages/aboutUs.html">درباره ما</a></li> 
     <li style="display:none;" class="mobileSwLang"> 
      <a href="#">English version</a></li> 
    </ul> 
    </nav>

https://jsfiddle.net/MelodyHajian/4ntL3m9o/ 給我通知：PLZ。

來源

2016-02-03 Melody Hajian

我們至少需要一些CSS幫助。用只需要的代碼創建一個jsfiddle來使其工作。 –

如果'li's是'inline-block'，那麼'white-space：nowrap;'將在'ul'上執行else：'ul {display：table} li {display：table-cell;'** float：沒有**'}'沒有足夠的信息讓你成爲這個 –

@ChrisG我編輯了問題，檢查jsfiddle。 –

jQuery的可能幫助這裏是一個的jsfiddle我打了......

$(window).resize(function() { 
var windowsize = $(window).width(); 
if (windowsize > 767) { 
$('.nav').show(); 
} else { 
$('.nav').hide(); 
$('.toggle').removeClass('open'); 
} 
}) 
$('.toggle').click(function(event) { 
$(this).toggleClass('open'); 
if ($(this).hasClass('open')) { 
    $('.nav').show(); 
} else { 
$('.nav').hide(); 
} 
})

http://jsfiddle.net/GlynneT/2pv9pkb0/

來源

2016-02-03 16:14:30

我編輯了這個問題，並添加了jsfiddle link.check它。 –

當屏幕尺寸正在減小時遇到導航欄問題

回答

相關問題