AlexWebLab / bootstrap-5-wordpress-navbar-walker

Bootstrap 5 WordPress navbar walker menu.
https://github.com/AlexWebLab/bootstrap-5-wordpress-navbar-walker
MIT License
250 stars 107 forks source link

Level 2 Item not showing if it has children at level 3. #19

Open asifpix opened 2 years ago

asifpix commented 2 years ago

Hello Alex, Hope you are doing well. I have encountered an issue today.

If you have any 3rd level menu item then it's immediate parent item will not show. To get understand the issue I have attached 2 screenshots. On 2nd screenshot of front-end you can see that, the "Level 2" menu item is not showing because of it has children. "Level 2a" and "Level 2b" are showing properly because of they don't have any children items.

Screenshot_1 Screenshot_2

I have fixed the issue already on my side.

Best Regards Asif

DrogoNevets commented 2 years ago

having same issue - it is because of the dropdown menu css class being display: none

attempting to find a fix

Kemal-Sulic commented 2 years ago

I'll take a closer look in the near future, but if you're still having issues, there's a small hotfix for customers/admins to not mess up the menu by hooking into nav-menus.php.

AlexWebLab commented 2 years ago

@asifpix Feel free to create a pull request with the fix. I will not fix this because it's not a bug for the scope of the project since Bootstrap 5 doesn't support 3 levels menu.

DrogoNevets commented 2 years ago

@AlexWebLab I can create a fix, however needs JS and CSS is this ok?

AlexWebLab commented 2 years ago

@AlexWebLab I can create a fix, however needs JS and CSS is this ok?

Yeah you can share. Maybe I'll make a branch for that.

beshealthcare commented 2 years ago

Having same issue whereby third level isn't displaying as depicted above, is there a fix for this yet?

DrogoNevets commented 2 years ago

I am still working on this amongst my day job. It is probably good enough tbh - but want to have a little play around more

I am using it here if you are happy with that I can create a fork and PR and see what @AlexWebLab thinks, but need to think about the package for it a little too

beshealthcare commented 2 years ago

Hi @DrogoNevets - Your version seems to achieve the desired effect, so I would be more than happy to use that over what I have. The only thing i'd change for my personal requirement is to have the menu's open on mouseover rather than click on desktop, with open on click for mobile.

I still can't understand why Bootstrap and Wordpress can't work together to fix this issue.

DrogoNevets commented 2 years ago

I am away over the weekend, will try and start the packaging and PR process by next weekend for everyone

AlexWebLab commented 2 years ago

I am still working on this amongst my day job. It is probably good enough tbh - but want to have a little play around more

I am using it here if you are happy with that I can create a fork and PR and see what @AlexWebLab thinks, but need to think about the package for it a little too

I'm totally okay but NOT with open on hover.

justinb40 commented 2 years ago

@DrogoNevets any progress? I've also run into a use case that could use this fix.

asifpix commented 2 years ago

Hello @AlexWebLab

I have created a pull request with the fix.

cdsaenz commented 2 years ago

To avoid breaking anything in the current implementation (following Bootstrap design) , after a big effort I came up with a solution , by basically taking Alex's code and overriding display_elementand removing the $depth check (could be added back with a different parameter). Also added some css classes here and there. It's all in the GIST link below (in the code, a link to the CSS too). Just finished, could be rough, so test it out, but here it works fine! UPDATE: it was mostly CSS. Call with $depth 3 or more! https://gist.github.com/cdsaenz/d6d65294d79a0b71b95c55a4bbd47f7d image

justinb40 commented 2 years ago

@cdsaenz this seems to work on desktop, but on mobile the menu immediately closes before it can open the third level.

cdsaenz commented 2 years ago

@cdsaenz this seems to work on desktop, but on mobile the menu immediately closes before it can open the third level.

Thanks a lot Justin! Didn't have time to check the mobile menu. More CSS required, will see to that!

cdsaenz commented 2 years ago

@cdsaenz this seems to work on desktop, but on mobile the menu immediately closes before it can open the third level. The solution as nicely stated in https://stackoverflow.com/a/18024991/827376 where I took some of the code, works either with some javascript or via hover "expanding" (display none to block) . As Alex I don't like the hover solution that much :) But that's how I left it in the CSS gist for now.

UPDATE: I think I found the culprit :) These lines in theme.js are hiding the canvas when clicking on the next level. Without these lines you don't need the hover open, but obviously they're used for something else. Need to see why I'm getting caught by this query and avoid it.

$('.offcanvas a:not(.dropdown-toggle):not(a.remove_from_cart_button), a.dropdown-item').on('click', function() {
         $('.offcanvas').offcanvas('hide');
});
jakenCD commented 2 years ago

Hi guys, how is this fix going? I'm not liying if I say I've been weeks looking for a fix and this is where the fix is almost found. The solutions of @DrogoNevets almost does it (except the hover issue mentioned by @AlexWebLab ). Is there any plan of publishing it?

Thnks so much

imanishpushkar commented 2 years ago

find the fix here https://github.com/imanishpushkar/bs5-navwalker

jakenCD commented 2 years ago

Thanks!

On dj., de set. 1, 2022 at 14:15, Manish @.***> wrote:

find the fix here https://github.com/imanishpushkar/bs5-navwalker

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.***>

jakenCD commented 2 years ago

Just tried it. It works, at first sight, beautifully. THANKS En sábado, 3 de septiembre de 2022, 20:31:21 CEST, jordi cd @.***> escribió:

Thanks!

On dj., de set. 1, 2022 at 14:15, Manish @.***> wrote:

find the fix here https://github.com/imanishpushkar/bs5-navwalker

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.***>

jakenCD commented 2 years ago

Sorry to bother you again. I've inspected the element and in device it doesn't load the 3rd level of the menu.  I copied your exact code and the problem persisted. I do not get what's wrong traveladic.com  En martes, 6 de septiembre de 2022, 11:02:42 CEST, jordi cd @.***> escribió:

Actually, I just tried it with the phone and the 3rd level is not opening.  En martes, 6 de septiembre de 2022, 10:30:48 CEST, jordi cd @.***> escribió:

Just tried it. It works, at first sight, beautifully. THANKS En sábado, 3 de septiembre de 2022, 20:31:21 CEST, jordi cd @.***> escribió:

Thanks!

On dj., de set. 1, 2022 at 14:15, Manish @.***> wrote:

find the fix here https://github.com/imanishpushkar/bs5-navwalker

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.***>

imanishpushkar commented 2 years ago

@jakenCD I have written steps too, follow them, clear your cache, it will work.

rickywebmaster commented 1 year ago

@imanishpushkar working for me, thanks

jakenCD commented 1 year ago

It worked like a charm. Thanks!

On dl., de set. 19, 2022 at 13:04, @.***> wrote:

@imanishpushkar working for me, thanks

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: @.***>

jakenCD commented 1 year ago

Sorry, it was my fault.  I have the device menu inserted in a modal. That is the problem. Trying to solve it. En martes, 6 de septiembre de 2022, 11:16:34 CEST, jordi cd @.***> escribió:

Sorry to bother you again. I've inspected the element and in device it doesn't load the 3rd level of the menu.  I copied your exact code and the problem persisted. I do not get what's wrong traveladic.com  En martes, 6 de septiembre de 2022, 11:02:42 CEST, jordi cd @.***> escribió:

Actually, I just tried it with the phone and the 3rd level is not opening.  En martes, 6 de septiembre de 2022, 10:30:48 CEST, jordi cd @.***> escribió:

Just tried it. It works, at first sight, beautifully. THANKS En sábado, 3 de septiembre de 2022, 20:31:21 CEST, jordi cd @.***> escribió:

Thanks!

On dj., de set. 1, 2022 at 14:15, Manish @.***> wrote:

find the fix here https://github.com/imanishpushkar/bs5-navwalker

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.***>

jakenCD commented 1 year ago

Actually, I just tried it with the phone and the 3rd level is not opening.  En martes, 6 de septiembre de 2022, 10:30:48 CEST, jordi cd @.***> escribió:

Just tried it. It works, at first sight, beautifully. THANKS En sábado, 3 de septiembre de 2022, 20:31:21 CEST, jordi cd @.***> escribió:

Thanks!

On dj., de set. 1, 2022 at 14:15, Manish @.***> wrote:

find the fix here https://github.com/imanishpushkar/bs5-navwalker

— Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you commented.Message ID: @.***>

thewebsitetoday commented 1 year ago

Thanks @imanishpushkar

robialfaro commented 1 year ago

Thanks @imanishpushkar