keeping a navbar ul horizontal on small screens

Question

I have a Bootstrap navbar that has 2 ul's in it.

the first UL hides into the collapse menu on small screens.

the second UL is still visible.

the problem i've run into, is that second UL always displays vertically. i can't seem to override it to display horizontally. i keep inspecting the css , but nothing i've found seems to control that.

http://www.bootply.com/render/121627

( some of the css is borrowed from // Twitter bootstrap 3 navbar navbar-right outside navbar-collapse )

To clarify:

this is what I see on <760px wide screens:

 [ brand ]     -item1      [---]
               -item2

this is what i want to see:

 [ brand ] -item1 -item2  [---]

Answer 1

the solution was to target the ul>li on the navbar.

.navbar-right > ul > li { float:left; }

Answer 2

This is what worked for me in a similar situation:

.navbar-right {
    float: right;
}

.navbar-right > li {
    float: left
}

.navbar-right > li > a {
    display: block;
}