With the bootstrap 5 navbar how do we have the left aligned items overflow under the right?

user_9638646 0
Viewed 29

Before the navbar breakpoint I'd like the right aligned items to always be visible with the left aligned items overflowing hidden. However if you check the codeply and drag the divider you'll see the left aligned items push the right aligned item off the screen.

https://www.codeply.com/p/atSWmE5DeY

I'd like to avoid calculating how many fit and dynamically removing items in javascript.

bootstrap-5
1 Answers

If I understand what you're asking, " like the right aligned items to always be visible with the left aligned items overflowing hidden" you'd use justify-content-end overflow-hidden on the the navbar-collapse..

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse justify-content-end overflow-hidden" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                </li>
                <li class="nav-item"><a class="nav-link" href="#">LinkText</a></li>
                <li class="nav-item"><a class="nav-link" href="#">LinkText</a></li>
                <li class="nav-item"><a class="nav-link" href="#">LinkText</a></li>
                <li class="nav-item"><a class="nav-link" href="#">LinkText</a></li>
                <li class="nav-item"><a class="nav-link" href="#">LinkText</a></li>
                <li class="nav-item"><a class="nav-link" href="#">LinkText</a></li>
                <li class="nav-item"><a class="nav-link" href="#">LinkText</a></li>
                <li class="nav-item"><a class="nav-link" href="#">LinkText</a></li>
                <li class="nav-item"><a class="nav-link" href="#">LinkText</a></li>
                <li class="nav-item"><a class="nav-link" href="#">LinkText</a></li>
                <li class="nav-item"><a class="nav-link" href="#">LinkText</a></li>
                <li class="nav-item"><a class="nav-link" href="#">LinkText</a></li>
                <li class="nav-item"><a class="nav-link" href="#">LinkText</a></li>
                <li class="nav-item"><a class="nav-link" href="#">LinkText</a></li>
                <li class="nav-item"><a class="nav-link" href="#">LinkText</a></li>
            </ul>
            <ul class="navbar-nav">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> Menu </a>
                    <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

https://codeply.com/p/eqLnzoMJxD

user_1714560
Related