Show navbar-nav horizontally in mobile screen

Question

The code below shows horizontally in normal desktop view. However, on mobile screen, it shows vertically.

    <ul class="nav navbar-nav">
            <li>Link 1</li>
            <li>Link 2</li>
    </ul>

Web View: Link 1 Link 2

Mobile View:

Link 1

Link 2

I want to show the Mobile view horizontally. Trying to find the right css but couldn't find it after spending hours on it. Could someone point me to the right direction?

Answer 1

Bootstrap 4

Wrapping your code with nav and navbar-expand class makes the trick.

 <nav class="navbar navbar-expand navbar-light">
    <ul class="nav navbar-nav">
            <li class="nav-item pl-2">Link 1</li>
            <li class="nav-item pl-2">Link 2</li>
    </ul>
 </nav>

Answer 2

Add this CSS

.navbar-collapse.collapse {
display: block!important;
}

.navbar-nav>li, .navbar-nav {
float: left !important;
}

.navbar-nav.navbar-right:last-child {
margin-right: -15px !important;
}

.navbar-right {
float: right!important;
}

Check This Demo