Pinegrow 6.0 - nav button collpase not working

General Support Forum Feedback
,
1

I installed pinegwow 6.0 recently , using bootstrap 5 nav bar button collapse not working in responsive mode neither mobile neither tablet.

2

Hi @HerrscherOfReason,
Can you give me some more info and maybe a screen shot of your code for the button? I have a fresh install of PG 6 on Mac. When I load in the Directory template, the button on the ‘index.html’ works fine.
Cheers,
Bob

3

Here’s the image,

image
image1180×868 58.1 KB

i just used the navbar component.

4

Try this! Just copy past it. It’s better when you copy your code in to your post instead of a image. Makes it much easier to test your code! If this doesn’t work there is a other problem.
Regards,
David

  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">Carousel</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-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 me-auto mb-2 mb-md-0">
                        <li class="nav-item active">
                            <a class="nav-link" aria-current="page" href="#">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                        </li>
                    </ul>
                    <form class="d-flex">
                        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                        <button class="btn btn-outline-success" type="submit">Search</button>
                    </form>
                </div>
            </div>
        </nav>
5

Thanks , here is my code for test.

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <meta name="description" content="Pinegrow Web Editor - Directory Bootstrap v5 Template">

    <meta name="author" content="">

    <title>Pinegrow | Bootstrap Blocks Template</title>

    <!-- Bootstrap core CSS -->

    <link href="bootstrap_theme/bootstrap.css" rel="stylesheet" type="text/css">

    <link rel="stylesheet" href="blocks.css">

    <!-- Custom styles for this template -->

    <link href="style.css" rel="stylesheet">

</head>

<body>

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

        <div class="container-fluid"> 

            <a class="navbar-brand" href="#">Navbar</a> 

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler24" aria-controls="" aria-expanded="false" aria-label="Toggle navigation"> 

                <span class="navbar-toggler-icon"></span> 

            </button>                 

            <div class="collapse navbar-collapse" id="navbarToggler24"> 

                <ul class="navbar-nav ms-auto px-2 justify-content-between w-50 mb-lg-0"> 

                    <li class="nav-item"> 

                        <a class="active fw-bold nav-link text-body" href="#">Home</a>

                    </li>

                    <li class="nav-item"> 

                        <a class="fw-bold nav-link text-body" href="#" target="_pg_blank">Parceiros</a>

                    </li>

                    <li class="nav-item"> 

                        <a class="fw-bold nav-link text-body" href="#" target="_pg_blank">Serviços</a>

                    </li>

                    <li class="nav-item"> 

                        <a class="fw-bold nav-link text-body" href="#" target="_pg_blank">Contactos</a>

                    </li>                         

                </ul>

            </div>                 

        </div>             

    </nav>

</body>
6

I have to say it didnt work .

7

Thanks for the code. Your navigation code works when I try it in a Bootstrap 5 project.
Check if your javascript link at the bottom is connected and if the js and css files are there:

  <script src="assets/js/popper.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>

And of course your CSS:

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

In the library/plugins section under file you can update Bootstrap5 to the latest version. Don’t forget to Save All!

Have to go now!

Good Luck!

2 Likes
8

It worked! thanks alot.