CODEWITHSUNDEEP
twitter-bootstraplaravelnavbarbootstrap-4
Chriz74
Chriz74

Reputation: 1480

navbar not showing any link after bootstrap 4 alpha 6 installation

I understand that they changed the navbar from the alpha 5 however I can't find what is breaking my previously working navbar. If I resize the page to XS the hamburger appears and the links are there but what I get at > XS is a blue line with nothing.

The nav is declared as:

<nav class="navbar navbar-inverse bg-primary">
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
    &#9776;
    </button>
    <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar">
        <a class="navbar-brand" href="/home">My Project</a>
        <ul class="nav navbar-nav">
            @if (Auth::check())
            <li class="nav-item"><a class="nav-link" href="/auth/logout">Logout</a></li>
            @else
            <li class="nav-item"><a class="nav-link" href="/auth/login">Login</a></li>
            @endif
            ///
        </ul>
    </div>
</nav>

any clue?

Upvotes: 1

Views: 415

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362620

Here's the updated navbar for alpha 6...

https://www.codeply.com/go/wMQvyBdLTi

The navbar-toggleable-xs has changed to navbar-toggleable and needs to go in the navbar element. The toggler will hide according the to the navbar-toggleable breakpoint so you can remove hidden-sm-up. Finally, add class navbar-collapse to the collapse.

<nav class="navbar navbar-inverse navbar-toggleable bg-primary">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
    &#9776;
    </button>
    <div class="collapse navbar-collapse" id="exCollapsingNavbar">
        <a class="navbar-brand" href="/home">My Project</a>
        <ul class="nav navbar-nav">
            @if (Auth::check())
            <li class="nav-item"><a class="nav-link" href="/auth/logout">Logout</a></li>
            @else
            <li class="nav-item"><a class="nav-link" href="/auth/login">Login</a></li>
            @endif
            ///
        </ul>
    </div>
</nav>

For Bootstrap 4 Beta, navbar-toggleable-* has changed to navbar-expand-*, navbar-inverse is now navbar-dark

Upvotes: 1

Related Questions