Navbar links and toggles

I have added a navbar using the Bootstrap 4 jumbotron.html provided template. In large or medium view, the links work fine opening their respective linked pages but the links do not change color to indicate activity. Do I need to manually open each page and change properties so they change color to indicate they’re the active page?

When I view in a moblie device with a smaller screen, the navbar correctly shrinks and uses collapsed toggles. I cannot get the toggles to expand and display the links like they should in any of my browsers.

Is there something not correctly setup in my PineGrow app that prevents them from working correctly or do I need to add a javascript code block or a plugin so they’ll work?

2 Likes

Randy,

The components in Pinegrow are very “raw”, meaning they’re sort of stripped down to their most basic code, to allow people the most flexibility in how they build the site. While in some drag & drop builders you can drag fully functional components into the layout and they work off the bat, these are usually limited to working in only one way. Pinegrow is a very open-ended style program. It’s less of a “builder” and more of an “editor”, so if you’ve never built a website before, it may not be the best choice for your first time. It’s more suited to people looking to understand all the nuts and bolts that go into the construction of a site from the code level, and to be able to edit those things at will.

In the case of the navigation, if you refer to my attached image, you can see how the link is made to change appearance in Bootstrap. It’s done through the application of the “active class” to the navigation button, which you can see highlighted in the Tree View in blue. If you go to the properties palate, you can see the CLASSES HTML and you’ll see where I’ve circled the active class in red. If you click on this, it will temporarily disable the class, so you can see the change in the navigation item (it will no longer be highlighted.)

In order to make the links on each page be highlighted to indicate they are “active” you need to open the page, click on the nav item in the tree view, and add the active class, while at the same time, removing it from any nav items you don’t want to show as “active.”

Regarding your other question, the drop down (hamburger) menu in tablet/mobile view does rely on Javascript to display, so you need to have the library installed, or remotely referenced in your HTML. You can test whether something needs Javascript to work from within Pinegrow. In the case of the this menu, just change the view to SM or XS so you see the menu, then click the green box with the JS in the top menu to disable Javascript. You’ll see the dropdown no longer works.

Unfortunately, Pinegrow is not a very easy program to understand if you don’t already have a reasonably good understanding of how HTML and CSS work together to style page elements. You don’t need to know how to program Javascript to build a website, but it helps to at least understand how it’s used on the page to make things happen.

I hope this helps you out. Cheers!

4 Likes

So, I am having the same issue involving the drop down hamburger menu. While Printninja’s answer was informative, I am a newbie and having issues understanding.

Do I need a plugin on Wordpress or Pinegrow to get the hamburger section of the drop down to be responsive and display menu options?

I understand you can turn on and off JS to test if it works, but unless i’m misunderstanding, I already know it doesn’t work. I need to make it work is the issue.

Any help is much appreciated!

A few questions… how are you building your site in Pinegrow? Are you using one of the Bootstrap Frameworks, or are you using plain HTML? Also, are you using one of the template pages as a starting point, or a blank page?

Let’s do a test… start a new page or project and choose Bootstrap 4, and choose the starter-template.html, then preview this page in your web browser by clicking the "preview page in browser icon at the top of the Pinegrow screen. Reduce the width of your browser until the hamburger menu appears, click it, and tell us if it’s working. This will verify that Pinegrow is working correctly, your browser is working correctly, and Javascript is functioning.

1 Like

The answer to the question about the active button http://docsbeta.pinegrow.com/navigation-menus/

The reason: when WordPress adds a class to the element, it takes the class of the first <li> (in Html) and applies it to all similar elements. When WordPress is added the list to submenus , it does not display the class responsible for the drop-down menu. How to add conditions : when <li> have element <ul> then a certain class is added to the <li>.
I have a class “has-children”, you can see the photo ←.