Question

我有一个响应式导航栏。当屏幕尺寸略微减小时，最后的li会进入其他线下的下一行。我应该怎么做才能修复它，以便它不会移动到其他菜单元素下的下一行？

HTML code：

<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。

Answer 1

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/

屏幕尺寸减小时导航栏出现问题

1 个答案: