Skip to content
Advertisement

Bootstrap 4 navbar-toggler button doesn’t work when located at specific sites

At first, my navbar in ADMIN desktop view is like this. This works without any problems. The “add” button is only seen by admin, like the “edit” button from every product.

enter image description here

When in mobile version, It looks like this.

enter image description here

When I press the “hamburger” button, It looks like this.

enter image description here

The problem comes in other linked sites. When I press the “hamburger” button, It shows the sites. Now I can navigate to those sites and then FROM those sites navigate to other sites EXCEPT when I go to “add” and “edit” site. When on those sites the “hamburger” button doesn’t open (doesn’t work), leaving me to go back by browser arrows.

enter image description here

enter image description here

The code from my header, where navbar is located.

<header>
    <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
        <div class="container-xl">
            <a class="navbar-brand">Decorations</a>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="index.php">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="favorites.php">Favorites <span class="badge badge-light"><?php echo $favorite ?></span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="basket.php">Basket <span class="badge badge-light"><?php echo $basket ?></span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link">Welcome <?php echo $_SESSION['name'] ?></a>
                    </li>
                    <li class="nav-item">
                        <?php if (is_admin()) { //If user is admin show edit/add/delete
                        ?>
                            <a class="btn btn-outline-success" href="decorations_add.php">Add</a>
                        <?php } // End of IF
                        ?>
                    </li>
                </ul>
                <a href="logout.php" class="float-right btn btn-outline-primary">Log out</a>
            </div>
        </div>
    </nav>
</header>

The code from add file:

<body>
    <div class="album py-5 bg-light">
        <div class="container">

            <div class="row">
                <div class="col-md-12">
                    <form action="decorations_insert.php" method="POST" enctype="multipart/form-data">
                        <h3>Add a decoration</h3>
                        <br>
                        <div class="form-group">
                            <label for="formGroupExampleInput">Add picture</label>
                            <input name="fileToUpload" type="file" class="form-control-file" id="formGroupExampleInput">
                        </div>
                        <div class="form-group">
                            <label for="formGroupExampleInput2">Add title</label>
                            <input name="add_title" type="text" class="form-control" id="formGroupExampleInput2" placeholder="Add title">
                        </div>
                        <div class="form-group">
                            <label for="formGroupExampleInput2">Add description</label>
                            <input name="add_description" type="text" class="form-control" id="formGroupExampleInput2" placeholder="Add description">
                        </div>
                        <div class="form-group">
                            <label for="formGroupExampleInput2">Add price</label>
                            <input name="add_price" type="number" class="form-control" id="formGroupExampleInput2" placeholder="Add price">
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>

The code from edit file:

 <body>
    <div class="album py-5 bg-light">
        <div class="container">

            <div class="row">
                <div class="col-md-12">
                    <form action="decorations_update.php" method="POST" enctype="multipart/form-data">
                        <h3>Edit a decoration</h3>
                        <br>
                        <input type="hidden" name="id" value="<?php echo $row['id'] ?>">
                        <div class="form-group">
                            <label for="formGroupExampleInput2">Change title</label>
                            <input name="change_title" value="<?php echo $row['title'] ?>" type="text" class="form-control" id="formGroupExampleInput2" placeholder="Change title">
                        </div>
                        <div class="form-group">
                            <label for="formGroupExampleInput2">Change description</label>
                            <input name="change_description" value="<?php echo $row['description'] ?>" type="text" class="form-control" id="formGroupExampleInput2" placeholder="Change description">
                        </div>
                        <div class="form-group">
                            <label for="formGroupExampleInput2">Change price</label>
                            <input name="change_price" value="<?php echo $row['price'] ?>" type="number" class="form-control" id="formGroupExampleInput2" placeholder="Change price">
                        </div>
                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>

Advertisement

Answer

My project is divided in multiple files. I am using “header” and “footer” files for header and footer. With PHP, I just include them in other files, so I don’t need to write the code all over again or fix everyting seperetly.

The problem was that when I made a file for admin only, I forgot to include a script link that made the “hamburger” button functional.

I forgot it because, It didn’t matter, because anyway only I can see the admin file. That’s why I forgot about the script that I included in the footer. Don’t make the same mistake.

The answer is, I included the footer in the “edit” and the “add” files at the bottom, and it worked. or you could just paste the script. That would work too.

User contributions licensed under: CC BY-SA
9 People found this is helpful
Advertisement