How to make navbar items not fall into new line on small screen in Bootstrap?

Question

I tried to make a responsive bootstrap navbar but not to collapse it. I want the item in navbar still stay in line even on small screen.

Here is my current navbar:

<nav id="topbar" class="navbar navbar-expand-sm bg-primary navbar-dark">
    <ul class="navbar-nav">
        <li class="nav-item active d-flex align-items-center">
            <a class="nav-link" href="#"><i class="fas fa-bars"></i></a>
        </li>
        <li class="nav-item d-flex align-items-center">
            <a class="nav-link" href="#"><span class="tobar-text">Brand</span></a>
        </li>
    </ul>
    <ul class="navbar-nav ">
        <li class="nav-item">
            <a href="#" class="nav-link d-flex align-items-center">
                <span class="tobar-text">Link 1</span>
            </a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link d-flex align-items-center">
                <span class="tobar-text">Link 2</span>
            </a>
        </li>
    </ul>
    <ul class="navbar-nav ml-auto flex-nowrap">
        <li class="nav-item">
            <a href="#" class="nav-link">Contact Us</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-link">About Us</a>
        </li>

    </ul>
</nav>

I have tried to set margin, padding, and whatever, but still it did not help. The items in navbar still fall into new line, I don't know why. Please kindly help. Thanks

Ismail Vittal · Accepted Answer · 2021-07-15T10:42:41.090

1

The items in navbar goes to new line is because of flex-direction: column. You can use the flex utility as below.

<ul class="navbar-nav d-flex flex-row">

edited Jul 15 '21 at 10:42

answered Jul 15 '21 at 10:36

Ismail Vittal

1,037
9
11

one plus, thanks very much it's kind of working fine, but there is an offset from the top on small screen I don't know where it was from though I set margin-top and padding-top could not fix. – Houy Narun Jul 15 '21 at 11:45
@HouyNarun Glad this helped !!! – Ismail Vittal Jul 15 '21 at 11:49
oh I found because the offset is from because I set the height to class `navbar-nav`. After I remove height, the item is perfectly centered the navbar on small screen. Thank very much :) – Houy Narun Jul 15 '21 at 11:51
it's very kindness of you :) – Houy Narun Jul 15 '21 at 11:51
@ Ismailvittal I could not find answer without your help in here, even I tried to google already. Thank you very much :) – Houy Narun Jul 15 '21 at 11:59
Thank you so much @HouyNarun :) and glad to be part of the Stackoverflow community. – Ismail Vittal Jul 15 '21 at 12:00

How to make navbar items not fall into new line on small screen in Bootstrap?

1 Answers1