Maintaining a horizontal navigation bar on small screens

Question

I have a Bootstrap navigation bar that has 2 ul.

the first UL is hidden in the collapse menu on small screens.

the second UL is still visible.

The problem I ran into is that the second UL is always displayed vertically. I cannot override it to display horizontally. I keep checking css, but nothing I found seems to control this.

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

(some of the css are borrowed from // Twitter bootstrap 3 navbar navbar-right outside of navigation folding )

To clarify:

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

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

here is what i want to see:

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

Answer 1

ul > li navbar.

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

Answer 2

, :

.navbar-right {
    float: right;
}

.navbar-right > li {
    float: left
}

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

Answer 3

For Bootstrap 4:

.navbar-nav { flex-direction:row !important; }