css - How to change line after navbar-text

Question

Here is my code :

<nav class="navbar navbar-expand-sm  navbar-dark  ">
    <div class="container-fluid">

        <a class="navbar-brand" href="#">LOREM IPSUM</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav  ml-auto">
                <p class="navbar-text">lorem Ipsum Dolor</p>
                <li class="nav-item ">
                    <a class="nav-link" href="#">LOREM</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">IPSUM</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">DOLOR</a>
                </li>

            </ul>
        </div>
    </div>
</nav>

The result produced by this:

How to change line after "lorem ipsum dolor" and show my all nav links(in same line) in separate line , I have tried display:block but it is not working. Any help will be appreciated !

Answer 1

To display nav links in separate line and create a vertical navbar remove .navbar-expand-sm class from nav.

<nav class="navbar navbar-dark">
    <div class="container-fluid">

        <a class="navbar-brand" href="#">LOREM IPSUM</a>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="collapsibleNavbar">
            <ul class="navbar-nav  ml-auto">
                <p class="navbar-text">lorem Ipsum Dolor</p>
                <li class="nav-item ">
                    <a class="nav-link" href="#">LOREM</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">IPSUM</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">DOLOR</a>
                </li>

            </ul>
        </div>
    </div>
</nav>