Is it possible to add a css class to the a elements of the menu without breaking anything or changing the core of the plugin (other then parsing and altering the dom with JS of course...)?

Yes, but you can target the element without needing to in CSS.

However I believe this post, https://octobercms.com/forum/post/overriding-plugins-templates, explains how achieve what you're after.

If neither of those work, let me know what you're trying to achieve and I'll see what I can do to help.

Hello!

1. Thanks for your plugin!
2. Well, really, all I want to do is use your plugin with bootstrap. As you probably know, bootstrap has a class on it's href elements called nav-link. Obviously I can achieve this using javascript, but that is a really smelly workaround. Overriding the plugin's template seems just as bad, because now I have completely deviated from your core template, and whenever you roll out an update, I have to either re implement your changes or redo my required changes. See what I mean?

But, I guess, if there is no other way, then so be it. Just wondering why you offer to add classes to ul and li elements, but not the href elements.

Cheers, Jürgen

Hi Jürgen

I see the assumptions you've made.

Menumanager works correctly with the current version of Bootstrap, which is 3.3.6. In the documentation (http://bootstrapdocs.com/v3.3.6/docs/components/#nav) you'll see that the anchor elements (not href, which is an attribute) do not have a class. They're all on the li element.

As you're talking about classes on the anchor element, it appears you are wanting to use the Bootstrap 4 alpha version? If you want to use an alpha version of software you can expect to run into issues with stable software, such as this plugin. I'd even go as far as to say that this plugin is incompatible with bootstrap 4 in it's current template style.

Secondly, the method outlined is the OctoberCMS way of over-riding plugin templates. It is not wrong, it is not bad, it is simply the way this CMS works.

After a very quick look at the Bootstrap 4 docs, the quickest way to get what you want to achieve is to over-ride the templates so you can get rid of the li completely, use the ul class on the nav element and the li class on the anchor. It's not going to end up with a useful user experience if you then need to pass this on to clients, and it will obviously require some work in the future if the component output changes in the future. In my opinion, you're better off forking the plugin and making the necessary PHP and template changes to work with Bootstrap 4. It has an MIT licence explicitly for this purpose.

I will be looking in to providing a switch between versions of Bootstrap and other popular frameworks in the future though, but as you need this now one of those 2 options will get you where you want to be.

Hi Ben,

you are correct, I am using the latest bootstrap 4 version, which, even if marked as alpha, is quite stable ;-)

Also, perhaps to your own surprise, I can assure you, your plugin and the code it generates works perfectly with bootstrap 4. At least, once the anchor class is added, which I did by overriding the plugin template.

I don't see a need to fork your plugin just yet, but I'd be happy to help out if it is needed!

Cheers!

Call me old fashioned, but I won't trust them not to make breaking changes until they go to a stable release.

I'm not too surprised it work, at the end of the day navigation is pretty simple to output. It is good to know that the underlying structure is relatively easy to work with though :)

What I'm planning is a settings switch to select different twig files/folders (not fully investigated yet) which work for different types of css frameworks. If you could share your plugin template in a gist that would be very useful for when I get a chance to work on this feature.

Last updated 7 years ago