Css priority navbar (menu) issue

Question

У меня есть простое отзывчивое меню, есть возможность свернуть содержимое меню, а не переводить на нисходящее слово на Fiddle.

Проблема, с которой я столкнулся, когда я изменяю размер браузера и меню, начинаю скрывать название кнопки More, также скрываясь при изменении размера браузера, я хочу, чтобы при запуске меню он скрывался.

HTML

<div class="nav"> 
    <div class="navControl"> 
     <a href="#">Navigation</a> 
    </div> 
    <ul style=" height: 50px !important;"> 
     <li><a href="#" class="active">صفہ اول</a></li> 
     <li><a href="#">تازہ ترین</a></li> 
     <li><a href="#">پاکستان</a></li> 
     <li><a href="#">دنیا</a></li> 
     <li><a href="#">کھیل</a></li> 
     <li><a href="#">فن و ثقافت</a></li> 
     <li><a href="#">ماحولیات</a></li> 
     <li><a href="#">کالم/بلاگ</a></li> 
     <li><a href="#">فیچرز</a></li> 
     <li><a href="#">ادب</a></li> 
     <li><a href="#">اسلامی صفحہ</a></li> 
     <li><a href="#">تصاویر</a></li> 
     <li><a href="#">ویڈیوز</a></li>  
     <li><a href="">ریڈیو</a></li> 
    </ul> 
</div> 

CSS

.nav { 
    background: #333; 
    direction:rtl; 
} 

.nav .navControl { 
    display: none; 
    cursor: pointer; 
} 

.nav ul { 
    list-style: none; 
    margin-bottom: 0px !important; 
    padding-right: 0px !important; 
} 

.nav li { 
    display: block; 
    position: relative; 
    z-index: 2000; 
} 

.nav a { 
    padding: 10px 10px; 
    display: block; 

    color: #fff; 
    text-decoration: none; 
    text-align: center; 
} 

.nav a:hover { 
    color: #ccc; 
} 

.nav span { 
    display: none; 
} 

.nav .dropdown { 
    text-align: center; 
} 

.nav .dropdown li { 
    margin: 0; 
    display: inline-block; 
} 

.nav .dropdown a { 
    padding: 0; 
    border-right: 0; 

    font-size: 0.8em; 
} 

.nav .dropdown li:last-child a { 
    margin-right: 0; 
} 

.nav .dropdown ul { 
    display: none; 
} 





/*----------------------------------------------------------------------------------------------------------------*\ 
    MEDIA QUERIES 
\*----------------------------------------------------------------------------------------------------------------*/ 
@media all and (min-width: 600px) { 
    .nav li { 
     margin-right: -4px; 
     display: inline-block; 
    } 

    .nav a { 
     border-right: 1px solid #555; 
    } 

    .nav .dropdown { 
     display: none; 

     background: #333; 

     position: absolute; 
     top: 100%; 
     left: 0; 
    } 

    .nav .dropdown li { 
     display: block; 
    } 

    .nav .dropdown a { 
     padding: 10px; 
     margin-right: 0; 

     white-space: nowrap; 
     text-align: left; 
    } 

    .nav span { 
     display: inline; 

     position: relative; 
     left: 5px; 
    } 

    .nav a:hover + .dropdown, 
    .nav .dropdown:hover { 
     display: block; 
    } 
} 

JS

ResponsiveNav = function(nav, breakPoint) 
{ 
    //if no nav container, output an error 
    if(typeof nav === "undefined") 
    { 
     console.log("The nav container needs setting."); 
     return false; 
    } 

    //elements 
    var navControl = nav.find(".navControl").first(); 
    var mainUL = nav.find("ul").first(); 
    var mainLIs = mainUL.children(); 
    var extraLI = $("<li class='extraDropdown'><a href='#'>More</a>"); 
    var extraDropdown = $("<ul class='dropdown'></ul>");  
    extraLI.append(extraDropdown); 

    //variables 
    var breakPoint = (typeof breakPoint != "number") ? 500 : breakPoint; 
    var siteWidth = $(document).width(); 
    var lastSiteWidth = null; 
    var navWidth = mainUL.width(); 
    var usingExtraDropdown = false; 

    //listener for screen width 
    $(window).resize(function() { 
     siteWidth = $(document).width(); 
     navWidth = mainUL.width(); 
     checkNavType(); 
     lastSiteWidth = siteWidth; 
    }); 

    //toggle nav when nav control is clicked 
    navControl.on('click', function(event) { 
     event.preventDefault(); 
     toggleNav(); 
    }); 

    //check if to use mobile nav or not 
    checkNavType(); 

    //added a extra dropdown if not already there 
    function addExtraDropdown() 
    { 
     if (!usingExtraDropdown) { 
      usingExtraDropdown = true; 
      mainUL.append(extraLI); 
     } 
    } 

    //make sure the LIs fit into the nav 
    function checkLIsFit() 
    { 
     var widthLIs = 0; 

     mainLIs = mainUL.children(); 

     mainLIs.each(function() { 
      widthLIs += $(this).outerWidth(true); 
     }); 

     //need a dropdown 
     if(widthLIs > navWidth) { 
      addExtraDropdown(); 
      moveLI(); 
     } 
    } 

    //move LIs to the extra dropdown from main nav 
    function moveLI() 
    { 
     mainLIs = mainUL.children().not(".extraDropdown"); 

     extraDropdown.prepend(mainLIs.last()); 

     checkLIsFit(); 
    } 

    //move all LIs from extra dropdown back to the nav 
    function resetExtraDropdown() 
    { 
     usingExtraDropdown = false; 

     var LIsToMove = extraDropdown.children(); 

     mainUL.find(".extraDropdown").remove(); 

     mainUL.append(LIsToMove); 
    } 

    //check if to use mobile nav or not 
    function checkNavType() 
    { 
     if(siteWidth != lastSiteWidth) 
     { 
      if(siteWidth >= breakPoint) 
      { 
       navControl.hide(); 
       mainUL.show(); 
      } 
      else { 
       navControl.show(); 
       mainUL.hide(); 
      } 

      resetExtraDropdown(); 
      checkLIsFit(); 
     } 
    } 

    //open or close nav 
    function toggleNav() 
    { 
     mainUL.slideToggle(); 
    } 
}; 

$(function() 
     { 
      $(".nav").each(function() 
      { 
       new ResponsiveNav($(this), 600); 
      }); 
     }); 

Answer 1

Вы не принимая во внимание ширина вашего li.extraDropdown (Больше) при вычислении widthLIs, он не скрывается, идет к нижней строке, потому что он не подходит.

Так, чтобы исправить это просто звезду его с 40 или с другим значения, которое вы хотите (и это работает, конечно), как это:

function checkLIsFit() 
{ 
    var widthLIs = 40; /*here*/ 

    mainLIs = mainUL.children(); 

    mainLIs.each(function() { 
     widthLIs += $(this).outerWidth(true); 
    }); 

    //need a dropdown 
    if(widthLIs > navWidth) { 
     addExtraDropdown(); 
     moveLI(); 
    } 
} 

Here a working jsfiddle example