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  [---]

Hmm, not 100% sure what you mean by display horizontally, unfortunately. Can you specify exactly what kind of behaviour you're aiming for? — Serlite, Mar 13 '14 at 17:20
ah, i got it! `.navbar-right > ul > li { float:left; }` I updated the Bootply. — Jonathan Vanasco, Mar 13 '14 at 17:50
Ah, I see! That's what you meant, I wasn't sure. Well, glad you were able to work it out on your own. — Serlite, Mar 13 '14 at 17:55

score 2 · Answer 1 · answered Mar 13 '14 at 18:10

2

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

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

answered Mar 13 '14 at 18:10

Jonathan Vanasco

15,111
10
48
72

t.m. · Answer 2 · 2017-06-28T17:27:07.923

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;
}

edited Jun 28 '17 at 17:27

answered Jun 28 '17 at 17:17

t.m.

1,430
16
29

score 0 · Answer 3 · answered Feb 09 '18 at 18:09

0

For Bootstrap 4:

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

answered Feb 09 '18 at 18:09

Jon Moldofsky

1

score 0 · Answer 4 · answered Apr 25 '21 at 14:42

0

In Bootstrap 4, add flex-row to the ul element of the navigation bar.(the ul element which contains li elements.

answered Apr 25 '21 at 14:42

Amin Mir

640
8
15

keeping a navbar ul horizontal on small screens

4 Answers4

Linked