Bootstrap 4: Always display the mobile menu button no matter screen size

Question

How can I get always display the mobile menu button no matter screen size? I do not want the links to appear until a person clicks the mobile button. Thank you!

I realize there is a post here on Bootstrap 3, however it does not work with Bootstrap 4. Will you please advise?

The answer marked as duplicate is for Bootstrap 3 and the most recent answer is over a year ago. If you are in Bootstrap 4, remove the navbar-toggleable-* class from the
class. Then it will always be collapsed, not just on a specific size. — The4thIceman, Feb 08 '17 at 20:36
Thanks. This is a useful answer, hopefully the flag gets dropped and I can upvote. — Bill Johnson, Feb 08 '17 at 20:48

Carol Skelly · Accepted Answer · 2019-04-02T17:46:20.877

Update Bootstrap 4.1.x

Exclude the navbar-expand* class.

As of beta, the navbar-toggleable-* class was replaced with navbar-expand-*, but now everythings moves up a tier. Since the default state of the navbar is always collapsed/mobile (xs) you'd simply exclude the navbar-expand-* class so that the menu is always collapsed on all tiers.

Beta demo: https://www.codeply.com/go/HiMQd9taEd
Bootstrap 4.1.3: https://www.codeply.com/go/ugmj6XKY79

Original Answer (Bootstrap 4 alpha)

In Bootstrap 4 the navbar is very different than 3.x, and it is always collapsed unless overriden by one of the navbar-toggleable-* classes. You just need to make sure your navbar doesn't include navbar-toggleable-*.

<nav class="navbar navbar-fixed-top">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsingNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Navbar</a>
    <div class="navbar-collapse collapse" id="collapsingNavbar">
        <ul class="navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Wow</a>
            </li>
        </ul>
    </div>
</nav>

Alpha demo: http://www.codeply.com/go/LN6szcJO53

Note that if you are copying from the Bootstrap examples you also need to delete the d-sm-inline-flex on the navbar-collapse div — Red, May 04 '20 at 14:38

Bootstrap 4: Always display the mobile menu button no matter screen size

1 Answers1