Issue with menu in mobile view (Pinegrow 6 & Bootstrap 5)

Pinegrow PRO
1

Good day everybody,

I bought the program for a few days ago and so far I am very happy with it.

Since I am completely unfamiliar with Bootstrap, the program is a real relief for me.

I have now created a first project and found out during testing that the navigation in the mobile view does not work properly.

If I jump to an “anchor point” within a page, it works quite well so far, but:

My problem is that the menu (in the mobile display) does not close by itself, but only when I click on the “Hamburger” button. In my project it is a “sticky header”.

That means: If I jump to an anchor point, the corresponding point in the document is displayed. If I then scroll back to the beginning, the menu is still open, although it should actually be “closed”.

This behavior is very annoying on the mobile phone (with sticky header), as the visitor first has to close the menu “manually” before he can read the content of the page.

I hope I have expressed myself clearly enough :wink:

So that I don’t “damage” my project, I started a new project and only made a few test fillings there. The same problem arises when testing. Here, too, the navigation does not work as desired and the menu remains open.

I like to attach the code.

I would be very grateful for any help!

Best wishes
mark

**<!DOCTYPE html>**
**<html lang="en">**
**    <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="">**
**        <meta name="author" content="">**
**        <title>Blank Template for Bootstrap</title>**
**        <!-- Bootstrap core CSS -->**
**        <link href="bootstrap_theme/bootstrap.css" rel="stylesheet" type="text/css">**
**        <!-- Custom styles for this template -->**
**        <link rel="stylesheet" href="blocks.css">**
**        <link href="style.css" rel="stylesheet">**
**    </head>**
**    <body>**
**        <div class="container">**
**</div>**
**        <header>**
**            <nav>**
**                <nav class="bg-light navbar navbar-expand-lg navbar-light position-sticky sticky-top"> **
**                    <div class="container-fluid"> **
**                        <a class="navbar-brand" href="#">Navbar</a> **
**                        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler43" aria-controls="" aria-expanded="false" aria-label="Toggle navigation"> **
**                            <span class="navbar-toggler-icon"></span> **
**                        </button>                         **
**                        <div class="collapse navbar-collapse" id="navbarToggler43"> **
**                            <ul class="navbar-nav me-auto mb-2 mb-lg-0"> **
**                                <li class="nav-item"> **
**                                    <a class="nav-link active" href="#punkt1">Home (Punkt 1)</a> **
**                                </li>                                 **
**                                <li class="nav-item"> **
**                                    <a class="nav-link" href="#punkt2">Punkt 2</a> **
**                                </li>                                 **
**                                <li class="nav-item"> **
**                                    <a class="nav-link" href="#punkt3">Punkt 3</a> **
**                                </li>                                 **
**                                                             **
**                            </ul>                             **
**                                                       **
**                        </div>                         **
**                    </div>                     **
**                </nav>**
**            </nav>**
**        </header>**
**        <main>**
**            <div id="content-shadow">**
**                <div class="content-container">**
**                    <div class="container" id="punkt1">**
**                        <div class="col-lg-12">**
**                            <h3>Home (Punkt 1)</h3> **
**                            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>**
**                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar faucibus neque, nec rhoncus nunc ultrices sit amet. Curabitur ac sagittis neque, vel egestas est. Aenean elementum, erat at aliquet hendrerit, elit nisl posuere tortor, id suscipit diam dui sed nisi. Morbi sollicitudin massa vel tortor consequat, eget semper nisl fringilla. Maecenas at hendrerit odio. Sed in mi eu quam suscipit bibendum quis at orci. Pellentesque fermentum nisl purus, et iaculis lectus pharetra sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar faucibus neque, nec rhoncus nunc ultrices sit amet. Curabitur ac sagittis neque, vel egestas est. Aenean elementum, erat at aliquet hendrerit, elit nisl posuere tortor, id suscipit diam dui sed nisi. Morbi sollicitudin massa vel tortor consequat, eget semper nisl fringilla. Maecenas at hendrerit odio. Sed in mi eu quam suscipit bibendum quis at orci. Pellentesque fermentum nisl purus, et iaculis lectus pharetra sit amet.</p>**
**                            <p></p>**
**                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar faucibus neque, nec rhoncus nunc ultrices sit amet. Curabitur ac sagittis neque, vel egestas est. Aenean elementum, erat at aliquet hendrerit, elit nisl posuere tortor, id suscipit diam dui sed nisi. Morbi sollicitudin massa vel tortor consequat, eget semper nisl fringilla. Maecenas at hendrerit odio. Sed in mi eu quam suscipit bibendum quis at orci. Pellentesque fermentum nisl purus, et iaculis lectus pharetra sit amet.</p>**
**                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar faucibus neque, nec rhoncus nunc ultrices sit amet. Curabitur ac sagittis neque, vel egestas est. Aenean elementum, erat at aliquet hendrerit, elit nisl posuere tortor, id suscipit diam dui sed nisi. Morbi sollicitudin massa vel tortor consequat, eget semper nisl fringilla. Maecenas at hendrerit odio. Sed in mi eu quam suscipit bibendum quis at orci. Pellentesque fermentum nisl purus, et iaculis lectus pharetra sit amet.</p> **
**                        </div>**
**                    </div>**
**                </div>**
**                <div class="content-container">**
**                    <div class="container" id="punkt2">**
**                        <div class="col-lg-12">**
**                            <h3>Punkt 2</h3> **
**                            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>**
**                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar faucibus neque, nec rhoncus nunc ultrices sit amet. Curabitur ac sagittis neque, vel egestas est. Aenean elementum, erat at aliquet hendrerit, elit nisl posuere tortor, id suscipit diam dui sed nisi. Morbi sollicitudin massa vel tortor consequat, eget semper nisl fringilla. Maecenas at hendrerit odio. Sed in mi eu quam suscipit bibendum quis at orci. Pellentesque fermentum nisl purus, et iaculis lectus pharetra sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar faucibus neque, nec rhoncus nunc ultrices sit amet. Curabitur ac sagittis neque, vel egestas est. Aenean elementum, erat at aliquet hendrerit, elit nisl posuere tortor, id suscipit diam dui sed nisi. Morbi sollicitudin massa vel tortor consequat, eget semper nisl fringilla. Maecenas at hendrerit odio. Sed in mi eu quam suscipit bibendum quis at orci. Pellentesque fermentum nisl purus, et iaculis lectus pharetra sit amet.</p>**
**                            <p></p>**
**                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar faucibus neque, nec rhoncus nunc ultrices sit amet. Curabitur ac sagittis neque, vel egestas est. Aenean elementum, erat at aliquet hendrerit, elit nisl posuere tortor, id suscipit diam dui sed nisi. Morbi sollicitudin massa vel tortor consequat, eget semper nisl fringilla. Maecenas at hendrerit odio. Sed in mi eu quam suscipit bibendum quis at orci. Pellentesque fermentum nisl purus, et iaculis lectus pharetra sit amet.</p>**
**                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar faucibus neque, nec rhoncus nunc ultrices sit amet. Curabitur ac sagittis neque, vel egestas est. Aenean elementum, erat at aliquet hendrerit, elit nisl posuere tortor, id suscipit diam dui sed nisi. Morbi sollicitudin massa vel tortor consequat, eget semper nisl fringilla. Maecenas at hendrerit odio. Sed in mi eu quam suscipit bibendum quis at orci. Pellentesque fermentum nisl purus, et iaculis lectus pharetra sit amet.</p> **
**                        </div>**
**                    </div>**
**                </div>**
**                <div class="parallax" style="background-image: url(http://pinegrow.com/placeholders/img20.jpg)"></div>**
**                <div class="content-container">**
**                    <div class="container" id="punkt3">**
**                        <div class="col-lg-12">**
**                            <h3>Punkt 3</h3> **
**                            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>**
**                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar faucibus neque, nec rhoncus nunc ultrices sit amet. Curabitur ac sagittis neque, vel egestas est. Aenean elementum, erat at aliquet hendrerit, elit nisl posuere tortor, id suscipit diam dui sed nisi. Morbi sollicitudin massa vel tortor consequat, eget semper nisl fringilla. Maecenas at hendrerit odio. Sed in mi eu quam suscipit bibendum quis at orci. Pellentesque fermentum nisl purus, et iaculis lectus pharetra sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar faucibus neque, nec rhoncus nunc ultrices sit amet. Curabitur ac sagittis neque, vel egestas est. Aenean elementum, erat at aliquet hendrerit, elit nisl posuere tortor, id suscipit diam dui sed nisi. Morbi sollicitudin massa vel tortor consequat, eget semper nisl fringilla. Maecenas at hendrerit odio. Sed in mi eu quam suscipit bibendum quis at orci. Pellentesque fermentum nisl purus, et iaculis lectus pharetra sit amet.</p>**
**                            <p></p>**
**                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar faucibus neque, nec rhoncus nunc ultrices sit amet. Curabitur ac sagittis neque, vel egestas est. Aenean elementum, erat at aliquet hendrerit, elit nisl posuere tortor, id suscipit diam dui sed nisi. Morbi sollicitudin massa vel tortor consequat, eget semper nisl fringilla. Maecenas at hendrerit odio. Sed in mi eu quam suscipit bibendum quis at orci. Pellentesque fermentum nisl purus, et iaculis lectus pharetra sit amet.</p>**
**                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar faucibus neque, nec rhoncus nunc ultrices sit amet. Curabitur ac sagittis neque, vel egestas est. Aenean elementum, erat at aliquet hendrerit, elit nisl posuere tortor, id suscipit diam dui sed nisi. Morbi sollicitudin massa vel tortor consequat, eget semper nisl fringilla. Maecenas at hendrerit odio. Sed in mi eu quam suscipit bibendum quis at orci. Pellentesque fermentum nisl purus, et iaculis lectus pharetra sit amet.</p> **
**                        </div>**
**                    </div>**
**                </div>**
**            </div>**
**        </main>**
**        <footer class="pb-3 pt-3 small text-secondary content-footer">**
**            <div class="container footer-ausrichtung">**
**                <div class="align-items-center row">**
**                    <div class="col-md pb-2 pt-2">**
**                        <p class="mb-0" id="footer-text">&copy; 2021. Werbegestaltung Kaiser</p>**
**                    </div>**
**                    <div class="col-md-auto pb-2 pt-2" id="footer-text">**
**                        <a href="#" class="footer-text" target="_pg_blank">Impressum</a> | **
**                        <a href="#" class="footer-text" target="_pg_blank">Datenschutz</a>**
**                    </div>**
**                </div>**
**            </div>**
**        </footer>**
**        <!-- Bootstrap core JavaScript**
**    	================================================== -->**
**        <!-- Placed at the end of the document so the pages load faster -->**
**        <script src="assets/js/popper.min.js"></script>**
**        <script src="bootstrap/js/bootstrap.min.js"></script>**
**    </body>**
**</html>**
2

Hi @wgk,
This is the default behavior of Bootstrap. There used to be a helper in previous versions of Bootstrap, but that seems to have gone away with the elimination of JQuery - I could also be wrong. Anyway, in order to get the menu to close with anchor points one way is with a little JavaScript.

<script>
            let navItems = document.querySelectorAll('.navbar li a');
            let navClose = document.querySelector('.navbar-collapse');
            navItems.forEach(item => {
                item.addEventListener('click', (e) => {
                   if(navClose.classList.contains('show')) {
                       navClose.classList.remove('show');
                   }
                });
            });
        </script>

Let me know if this works for you,
Bob

1 Like
3

@wgk

Hi Mark,
Normally it would close, but can you post a URL so we can look to your website? In Bootstrap 4 you had that problem in the beginning of the versions. But I made several Bootstrap 5 sites without the closing problem on mobile.
Here is a test site I work on based on Bootstrap 5:
link removed when you look on your mobile phone you can see the navbar collapse after click. (I have to finish the site still so don’t look at the details :wink:)

Regards,
David

1 Like
4

Hello Bob,

Thank you very much for your quick response to my posting.

I’ve just tried the script, but unfortunately it doesn’t solve my problem.

The menu remains open.

Nevertheless, many thanks for the solution.

Best regards
mark

5

Hello David,

Thank you very much for your quick response to my posting.

I’ve just tried the specified test page and the menu works the way I would like it to.

Since I created the menu purely with the Pinegrow editor (and that for several test pages), I don’t understand why all the menus don’t work for me as they do with your test page.

I uploaded a simple example to my server.

The url is:
http://testumgebung.wgk-server.de/test/#

Many thanks for your support!

Best regards
mark

6

@wgk

Hi Mark,

Thanks for the URL! I understand the problem, you want to scroll to anchor and for that you need additional JavaScript to make the scroll smooth and make use of the build in smooth scroll of Bootstrap 5.

I think the Start Bootstrap template is a good starting point. You can open the template in Pinegrow as a project. Just put it in a folder and open as project.
This contains the proper JavaScript (script js at the bottom of the template) for smooth scroll to a anchor point and let the menu close after click.

Good Luck,

David

1 Like
7

Hello David,

First of all, thank you very much for the quick answer.

“Scrolling” isn’t that important to me at the moment. "

Rather, I am wondering why closing the menu (as is the case with your example page) does not work in any of my test installations under Bootstrap.

The pattern I gave you (see link in the last post) was created with the current version of Pinegrow and strangely enough, “closing” doesn’t work there - for whatever reason.
At the moment I’m actually looking for the reason and the right solution :wink:

Nevertheless, I will of course still take a look at the proposed template, although I have already seen that the bootstrap comes from a “cdn server” and that this is not allowed here in Germany due to the GDPR.

So I have to have a solution in which all the necessary files (including bootstrap and JS) are saved on my own server.

Best wishes
Markus

8

Hi @wgk,
So, the closing of the menu on @AllMediaLab’s page is due to the loading of a new URL. Your’s does not because your URL isn’t really changing - just getting modified. This is the default action of all the versions of Bootstrap. In the past there were “hooks” that you could use and some helper jQuery for this problem. With the newest version jQuery has gone away and plain JavaScript must be used.

I imagine the script did not work due to slight differences between the posted HTML and your actual page. Let me walk you through the code and explain so you can modify it.

<script>
            let navItems = document.querySelectorAll('.navbar li a');

So, first you need to add <script> tags around the script and place it somewhere after your HTML before the closing <body>.
This next line selects all of your menu items. I assumed that they would be located inside a parent div or nav with a class of .navbar.

            let navClose = document.querySelector('.navbar-collapse');

This line grabs the section that the button toggles - it has an id of navbarToggler43 in your example code, but I was afraid you would change this. Bootstrap adds and removes a class of show to this section to show and hide the menu.

            navItems.forEach(item => {

This sets up a loop through each of the anchor links in the menu.

                item.addEventListener('click', (e) => {
                   if(navClose.classList.contains('show')) {
                       navClose.classList.remove('show');
                   }
                });

This adds a click listener to each of the anchor links that will remove the show class from the toggle section on click. I’ve tested this on my android phone. Not sure if it might act differently on iOS. It might need a touchend listener instead of a click listener. In that case, stay within the forEach loop and duplicate this entire section. Then replace the click with touchend.

            });
        </script>

There really isn’t many other solutions to this problem. If you add this script to your online example, I can trouble-shoot it if it isn’t working.
Cheers,
Bob

2 Likes
9

Hello bob,

Thank you for the great explanation.

I installed the script at the end of the header when I tried it for the first time. That was probably a mistake.

Now I have packed your code into a separate JS file and included it at the end of the test page. Things are looking a lot better now. I then packed the script into my “real project” in the same way and the menu now also closes there, which, however, has resulted in a new problem.

Unfortunately I have a sub-menu there and that can no longer be called up by the js-script.

To make things clearer, I’ve added a sub-menu to the test page.

http://testumgebung.wgk-server.de/test/#

Do you have any ideas how I can still do this?

Thank you for the great support!

10

Hi @wgk,
Sure - the easiest way would be to add a new class to each of the anchor links - but not the dropdown. Say close-item. So this would be added to the link for point 1, point 2, point 3a, and point 3b. Next, for the first line you would change it to

let navItems = document.querySelectorAll('.close-item');

That should be it.

As an aside - your top navigation section is a <nav> tucked inside another <nav>. You might want to change this.
Cheers,
Bob

1 Like
11

Hello Bob,

thanks again for the help.

I tried to implement the points:
1.) I removed the first NAV (I have no idea why I had that twice.
2.) I added a “close-item” to the 4 mentioned links.
3.) The JS has been rewritten accordingly in the first line.

I hope I got it all right.

Unfortunately, the first test didn’t bring me the effect I had hoped for.

So I would be very grateful if you would look over it again - thank you very much!

Kind regards, Mark

12

Hi Mark,
I’ll have to wait for your caching to update, I guess? Right now the HTML is modified, but the script is still the same.
Cheers,
Bob

1 Like
13

Hello bob,

I checked the file again on my server.

The new file with the changed content is located there.

/**

  • Mobile menu close
    */

         let navItems = document.querySelectorAll('.close-item');
 	let navClose = document.querySelector('.navbar-collapse');
 		navItems.forEach(item => {
 			item.addEventListener('click', (e) => {
            		if(navClose.classList.contains('show')) {
                		navClose.classList.remove('show');
            		}
         });
 		});
14

Hi,
Not sure - this is what I get when I look at the code of the page.

image
image1440×1048 156 KB

You can see the .close-item classes are there, but the script is still the old one. This is with a cache clear on the browser end.
Bob

1 Like
15

Hello bob,

I understand - to solve the problem, I renamed the js file and the corresponding link. The new file must now be loaded.

16

Ahhh! I just realized that you have both the script loading in as a file AND loading at the bottom of the page. The one at the bottom of the page is causing the unwanted behavior. Only load the external file and delete the on-page script.

1 Like
17

Hello bob,

a copy error had probably crept in.

The script should be loaded from an external JS file via a link in case I want to use it on several pages.

Now it should be right and it should work.

Can you take another look to see if everything is correct now?

I would like to thank you in any case for the great support!

1 Like
18

Looks good to me. It seems like that is the functionality you wanted. Correct?
Bob

1 Like
19

Yes Bob,

this is the feature i was looking for.

Thanks to your help, the problem was solved.

Thank you for the great support.

Many Thanks!

2 Likes