Pega redimencionar <ul> em tempo real ou quando precionado CRTL+5

[André Barbosa]

Bom dia pessoal...
Minha duvida é:
Tenho um menu onde ele é "infinito" horizontal, e dinâmico, ele vem do BD o tamanho máximo dele é: 1000px, o conteúdo <li> vem diretamente do BD onde o Cliente pode cadastra N dados para esse menu, assim ultrapassando os 1000px, outro detale é que a fonte vareia de tamanho de acordo com o tamanho da pagina se a pagina tem 800px a fonte fica com 12px se é 700 ela fica com 14px se tem 100px a fonte fica com 13px a fonte não tem um tamanho definido, como eu posso pega a soma dos <li> que muda de acordo com a fonte e soma-lo e a plica o tamanho no ul?

Pagina menu

<div class="back_nav">
        <div class="back_ul">
               <nav class="nav">
                   <ul>
                           <li> menuX </li> //vem do bd pode ser 1 ou 20, a fonte muda de tamanho de acordo com o tamanho da pagina
                   </ul>
             </nav>
     </nav>
</div>

Css:
.back_nav{
    height:60px;
    float: left;
    width:  100%;
    background: #8CC7DF;
}
.back_ul{
    float: left;
    margin-top: 5px;
    background:#000080;
    float: left;
    padding: 0;
    width: 100%;
    font-family: arial;
    text-transform: uppercase;
    overflow: hidden;
}.
.nav ul {
    float: left;
    margin: 0 auto 0 auto;
    font-family: michromaregular;
    /*amerika_sansregular;*/
    font-size: 1em;
   border: 1px solid red; //só para saber onde esta o ul
  }
.nav ul li {
    position:  relative;
    float: left;
    display:inline;
    list-style-type: none;
    line-height: 40px;
    text-align: center;

    /* border-right: 1px #FFF solid;*/
    color: #000; 
}


Jquery
$(document).ready(function() {
        function menu_center(x) {
            var k = 0;
            $('.nav').find('a').each(function() {
                k = parseInt($(this).innerWidth()) + k;
            });
            k = k + 20;
            $('.nav ul').innerWidth(k);
            if (k >= $('.back_ul').innerWidth() ) {
                $('.b_menu_').css({display: "block"});
            } else {
                $('.b_menu_').css({display: "none"});
            }
            if(window.innerWidth < 700){
                  $('.b_menu_').css({display: "none"});
            }
         }
           $(window).resize(function() {
            if (window.innerWidth > 700) {
                menu_center();
             }
        }); 
/* Quando a pagina é carregada ele não pega o valor real do <li>menuX,</li>,o valor real do li é o tamanho da menu com sua font no valor final da renderização.
pega apenas o valor da font sem o CSS, ficando desporporcional, sendo eu tenho que clica em algum link para a pagina entra no resize, ai sim ele funciona, quando eu pressiono CRTL+5 volta o problema
*/
        menu_center();
 });
Obreigado!

[André Barbosa]

Boa Galera já resolvi:

Apenas coloquei isso:

$(window).load(function() {
           menu_center();
//carrega depois que a pagina estiver carregada.
    });

estava aki:
$(document).ready(function() {
//carrega junto com a pagina

   });

[Marlon Pacheco]

Fiquei meio confuso.

Tem como simular esse comportamento aqui: http://codepen.io/marlonlp/pen/tkDjp

Assim fica mais fácil de ajudar.