CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Mohamed AGOUMI
Mohamed AGOUMI

Reputation: 3

navbar toggle menu isn't working on mobiles

When I minimize my browser or when I open my page from a mobile the toggle menu of navbar doesn't work so none can use the navbar this is my code where is the problem 

<nav class="navbar navbar-inverse">
<div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-nav" aria-expanded="false">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/github/eco/admin/">ADMIN HOME</a>
    </div>

    <div class="navbar-collapse collapse" id="app-pav">
        <ul class="nav navbar-nav">
            <li class="active"><a href="/github/eco/admin/categories.php">CATEGORIES</a></li>
            <li class="active"><a href="/github/eco/admin/members.php">MEMBERS</a></li>
            <li class="active"><a href="/github/eco/admin/comments.php">COMMENTS</a></li>
            <li class="active"><a href="/github/eco/admin/statics.php">STATISTICS</a></li>
            <li class="active"><a href="#">LOG</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"><?php echo $_SESSION['Username']; ?><span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a href="members.php?page=Edit&userId=<?php echo $_SESSION['id']; ?>"><?php echo lang('P-EDIT'); ?></a></li>
                    <li><a href="members.php?page=">SETTINGS</a></li>
                    <li><a href="logout.php">LOGOUT</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

Upvotes: 0

Views: 171

Answers (1)

Robert
Robert

Reputation: 6967

Typos are the bane of many a developer's existence and I regret to inform you that you are the latest victim of this dread beast. The way that Bootstrap's nav toggle operates is that you specify the target, which correlates to an existing class or ID.

In your code you have:

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-nav" aria-expanded="false">...</button>

But the associated menu is actually:

<div class="navbar-collapse collapse" id="app-pav">...</div>

Correcting the data-target to be the same as the id in .navbar-collapse results in the expected results.

Upvotes: 1

Related Questions