1

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

Houy Narun
  • 1,557
  • 5
  • 37
  • 86

1 Answers1

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">
Ismail Vittal
  • 1,077
  • 9
  • 12
  • 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
  • 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