Bootstrap 3: manter os itens da barra de navegação fora do colapso sem agrupar em uma nova linha? [duplicado

Esta pergunta já tem uma resposta aqui:

Eu poderia usar alguma ajuda para que minha barra de navegação do Bootstrap 3 aparecesse corretamente quando recolhid

Desculpas se for uma pergunta duplicada, mas uma boa pesquisa longa não produziu as respostas necessária

Criei uma barra de navegação responsiva com base no código de demonstração do Bootstrap. Nele, há uma imagem de 40x40 e um glifo de globo vinculado a menus suspensos, que eu alinhei e omiti à direita na navegação Collapse.

nfelizmente, o glifo de 40x40 e o globo aparecem em uma nova linha quando a navegação entra em colapso, o que eu não quer

Meu layout perfeito, quando a navegação cai, o 40x40 e o globo aparecem na mesma linha da imagem da minha marca, do botão de recolhimento, etc. alinhado à direita e não contido no recolhimento.

Obrigado por qualquer conselho que possa dar!

Code é assim:

    <nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-hd-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a href="index.php"><img class="navbar-brand img-responsive" src="http://placehold.it/138x38" alt="Logo"></a>
    </div>
     <div class="navbar-right">
        <ul class="nav"  style="float: right; display: inline-block !important">
            <li class="dropdown pull-right">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><img src="http://placehold.it/40x40" alt="Profile Image" style="display: inline-block !important"/><b class="caret grey"></b></a>
                <ul class="dropdown-menu">
                    <li class="dropdown-header">Hello</li>
                    <li class="divider"></li>
                    <li><a href="">Thing 1</a></li>
                    <li class="divider"></li>
                    <li><a href="">Thing 2</a></li>
                </ul>
            </li>
        </ul>
        <ul class="nav"   style="float: right; display: inline-block !important">
            <li class="dropdown pull-right">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-globe grey"></span><b class="caret grey"></b></a>
                <ul class="dropdown-menu">
                    <li style="padding: 10px"><p>News</p></li>
                </ul>
            </li>
        </ul>

         <div class="collapse navbar-collapse navbar-hd-collapse">
             <ul class="nav navbar-nav">
                 <li class="active"><a href="">Product</a></li>
                 <li><a href="">Other Product</a></li>
                 <li><a href="">Third Product</a></li>
             </ul>
         </div>
    </nav>

JS Fiddle está aqui:http: //jsfiddle.net/CaraGee/q8br8