I’m really struggling to get a nav menu to work in my WP theme. I’ve added the navbar (BS5) and the static nav works fine so there are no JS issues. But when I add the action to the
tag (I’ve tried both Menu - Smart and Nav Menu) it keeps showing the sub-pages instead of putting them in the dropdown.
This is really holding everything up so I need to get it working. I’ve watched Adam’s live video here and it seems to just work first time. I have exactly the same setup but it just isn’t working.
I’ve created a small javascript file which replaces everything so that the Menu looks fine again, but it’s very basic. @matjaz mentioned that there will be a new Pinegrow Version coming out this (or probably more likely next) week which includes the optimized nav-walker, where you can select the class of your dropdown and it get’s recognized. It also Includes support for Bootstrap 5 as far as i know.
So probably the best option is to wait for the next version, but if it’s really urgent I can send you the javascript-code!
Fantastic. Thanks @Wolfgang.Hartl. I’m tempted to just wait until the next PG version but if you’re able to send me your javascript that would be really helpful as a stopgap. I’m hoping to show the client the build but without the nav working it will only cause more confusion than help.
@sitestreet Just had a look at it. I just needed it once, so I’m after reading it not quite sure if there was any additonal setup needed in pinegrow, but I don’t think so!
What the script does is turning every nav-item into a bootstrap dropdown button (only 1 level deep). As I mentioned, I think it should work out of the box, let me know if not please then I’m gonna have a look into the project in Pinegrow what I did there!
Ah and one important thing to mention, it removes the “HREF” attribute from the created dropdown-button element (parent element of any child).
document.addEventListener("DOMContentLoaded", () => {
const subparents = document.querySelectorAll(".menu-item-has-children");
subparents.forEach((link) => {
var navItem = link.parentElement;
navItem.classList.add("d-flex", "align-items-center", "position-relative");
var newLink = document.createElement("button");
newLink.innerHTML = link.innerHTML;
// Copy the attributes
for (index = link.attributes.length - 1; index >= 0; --index) {
newLink.attributes.setNamedItem(link.attributes[index].cloneNode());
}
newLink.removeAttribute("href");
newLink.classList.add("dropdown-toggle", "btn", "btn-link");
newLink.setAttribute("data-bs-toggle", "dropdown");
link.after(newLink);
link.remove();
// parent.classList.add("dropdown-toggle dropdown-toggle-split");
var sub = newLink.nextElementSibling;
sub.classList.add("dropdown-menu");
subChilds = sub.querySelectorAll(".nav-item");
subChilds.forEach((subEntry) => {
subEntry.classList.add("dropdown-item");
});
});
console.log(subparents);
console.log("LOADED!");
});
Thanks @Wolfgang.Hartl! We are having some delays due to updating to the latest NWJS (including Mac arm build) and the resulting changes to the install packages build process. But PG7 is due next week.
No Worries, take your time - I’m sure it will be a cool release when it’s finished! I’m very excited about it & looking forward to it, but one or two weeks more or less doesn’t really matter!
I’m not sure what the production version will look like on the desktop, but I just checked the latest WP Plugin build, and it’s only single-level for Bootstrap 5.
Moreover, beyond the possible limitations of Pinegrow’s walker, Bootstrap no longer supports multi-level menus since version 3. There are certainly hacks as we published HERE for Bootstrap 4 but it is not planned that we propose a new tutorial for version 5 (and following versions).
In December 2012, in a statement posted on the Bootstrap 3 Development Github, Mark Otto (the creator of Bootstrap) said “We haven’t seen anyone using submenus in meaningful ways and the code necessary to make them work well is just too much overhead. Submenus just don’t have much of a place on the web right now, especially the mobile web. They will be removed with 3.0.”.
In 2016, when asked again about the support of submenus as part of the development of Bootstrap 4, he said “Nested dropdowns aren’t supported and haven’t been since v3. I made the decision over three years ago, and it hasn’t stopped anyone from building anything :).”.
For accessibility issues, and particularly on mobile touch devices, the use of such menus is nowadays widely discussed and it is generally recommended not to use them.
OK, I shall make sure I stick to one level. I do sites for schools and they seem to always need multiple levels in their menus but I know it would be better to avoid that… so I will
@Wolfgang.Hartl, I’m hoping you can help with this. Your script works perfectly and it’s populating the nav bar as it should. However, the dropdown colors are changed to white text on a white background and light grey background on hover. If I remove the Menu action, the styling is correct. And it’s also correct in PG. So it must be to do with the script but I just can’t see where.
I was hoping to hold out for PG7 when the native solution will be included but it’s been delayed until next week and I need to show an update to my client before then.
Are you able to offer any possible thoughts on this?
@sitestreet just checked the documentation of bootstrap again. Didn’t find any indicator that the class assigned to the child-elements is responsible for that hover-effect.
Maybe there are some other styles you have set in your theme/plugin to those child-elements which are responsible for that effect? As far as I know I think the sub-elements get the same classes as the main-menu items?
The Only class that is added to the sub-items is the “dropdown-item” class located at the end of the script:
