Question

I need to dynamically resize my dropdown menu main nav bar so it will resize to accommodate varying lengths of characters in the nav menu item names. Below is my code so far:

 $(document).ready(function(){
            var wNav = $("#navigation").outerWidth();
            var wLiTotal = 0;

            $("#navigation>ul>li").each(function(){
                wLiTotal += $(this).outerWidth();
                if((wLiTotal > wNav)||(wLiTotal < wNav)){
                 wNav = wLiTotal +3;
             };
          });    
       });

The problem is, even though I get the total width of all li’s, for some reason it it does not reset wNav to that width and I’m not sure why. Thanks in advance for any assistance.

Answer 1

$(document).ready(function() {
    var wNav = $("#navigation").outerWidth();
    var wLiTotal = 0;

    $("#navigation>ul>li").each(function() {
        wLiTotal += $(this).outerWidth();
        if ((wLiTotal > wNav) || (wLiTotal < wNav)) {
            wNav += wLiTotal + 3;  // you've increase wNav with its previous value
        };
    });
    $("#navigation").width(wNav); // set new wNav as new width
});