Boostrap 4 navbar element shows up without hamburger menu button

Question

I'm going right off the tutorial for Bootstrap 4 Beta. li links are showing up fine in the expanded view, however, when I collapse past the breakpoint, they disappear and the hamburger menu does not appear.

Any idea why this would be? I suspect it has something to do with the collapse plugin, but am not certain.

I'm running React, but here is my code when it compiles to html:

<div class="header">
    <nav class="navbar navbar-expand-lg navbar-inverse bg-inverse">
        <div class="navbar-header">
            <a class="navbar-brand" href="/">
                <img alt="Trellis" src="../../images/trellis.png">
            </a>
        </div>
        <button class="navbar-toggler" 
            type="button" 
            data-toggle="collapse" 
            data-target="#navbarSupportedContent" 
            aria-controls="navbarSupportedContent" 
            aria-expanded="false" 
            aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" 
            id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/signout">Sign Out</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/invite">Invite Friends</a>
                </li>
                <li class="nav-item ">
                    <a class="nav-link" href="/dashboard">My Plots</a>
                </li>
                <li class="nav-item ">
                    <a class="nav-link" href="/addPlot">Add Plots</a>
                </li>
            </ul>
        </div>
    </nav>
</div>

score 1 · Accepted Answer · answered Nov 07 '17 at 13:40

If you're using the Bootstrap 4 Beta, the classes "navbar-inverse" and "bg-inverse" need to be changed to "navbar-dark" and "bg-dark" respectively.

From

<nav class="navbar navbar-expand-lg navbar-inverse bg-inverse">

To

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

This was changed by the bootstrap team from alpha to beta versions of the framework. Therefore you want to use inverse in "alpha" versions of the framework but "dark" in beta versions of the framework.

Example codepen https://codepen.io/Washable/pen/mqrXoa

Boostrap 4 navbar element shows up without hamburger menu button

1 Answers1