Posted by NumerousHats on Tue, Dec 10, 2024 - 2:11pm

I am trying to configure main navigation on a site where some of the menu items have child items that I would like to appear as a dropdown. I'd like them to behave just like the "About" and "Add-ons" menu items on backdropcms.org do. I have set "Menu style" to "Dropdown", "Maximum Depth" to "unlimited", and "Collapsible behavior" to "default" in the block configuration. When I do that, I do in fact see the dropdowns, but only when I am on a page corresponding to a menu item has no children and not on a page that is the child of another menu item. In those cases, the menu no longer has any dropdowns.

To use backdropcms.org as an example, it's as if the "About" and "Add-ons" items have a dropdown if I'm on backdropcms.org or backdropcms.org/showcase, but all of the dropdowns vanish if I'm on backdropcms.org/about, backdropcms.org/philosophy, or backdropcms.org/modules.

Have I mis-configured something? 

I'm aware that there's an issue with Bootstrap 5 Lite if the menu is in "Header" vs "Top" (https://forum.backdropcms.org/forum/dropdown-issues-bootstrap-5-lite), but changing the location of the menu block doesn't fix the problem. And changing the theme to Basis doesn't fix it either, for that matter.

I also saw this: https://forum.backdropcms.org/comment/5941#comment-5941, but I'm not sure if it's trying solve the same problem. And I don't understand that code.

Any ideas?

Accepted answer

Definitely a problem with Mosaic Grid. Was able to reproduce the issue in the sandbox. I have created an issue on Github (https://github.com/backdrop-contrib/mosaic_grid/issues/34).

Comments

Olafski's picture

Wed, Dec 11, 2024 - 1:50am by Olafski

Hi @NumerousHats, one idea: Do the sub pages, where the dropdown doesn't appear, maybe use another layout? In this case you'd have to configure the main navigation block also in that other layout.

Wed, Dec 11, 2024 - 5:29am by NumerousHats

I just disabled all layouts except for "home", "dashboard", "default", and "admin_default", and the problem is still there...

Wed, Dec 11, 2024 - 6:04am by NumerousHats

Update: if I view the site on a phone-sized screen and tap on the hamburger, the menu expands out and all of the child items are visible regardless of what page I'm on. 

Could this be some sort of CSS/JS weirdness? If so, it's strange that it's happening even with the Basis theme. I would have figured that's well-tested.

Wed, Dec 11, 2024 - 6:15am by NumerousHats

So, one possible workaround would be to have a "perma-hamburger" by setting the menu breakpoint to something ridiculously big, i.e. use the menu toggle even on wide screens. 

Olafski's picture

Wed, Dec 11, 2024 - 6:25am by Olafski

Strange, the dropdown works as expected on any of my Backdrop sites. I guess there is a particular reason why it doesn't work for you.

Not sure if it will help to detect the reason, but feel free to post a link to your site, if you're comfortable with it.

Another idea: Set up a vanilla Backdrop site at https://backdropcms.org/demo, try to reproduce the problem and describe your steps here or in the Backdrop issue queue on Github.

Wed, Dec 11, 2024 - 6:29am by NumerousHats

No, the site is still a mess, so I don't want it public quite yet.

I had thought about seeing if I could reproduce it on the demo, or clone my site and start stripping stuff out and see if it starts working. I don't know if I want to sink time into it. At this point, I'm actually leaning towards the "perma-burger" workaround. I'll see what the other stakeholders think about it.

Wed, Dec 11, 2024 - 7:24am by NumerousHats

Actually, I spoke too soon. This is getting curiouser and curiouser... Maybe the below will spark some ideas.

So, I have two classes of pages. The first class are ones where on a wide screen (no hamburger) I see menu dropdown triangle markers that expand down when you click on them:

On narrow screens, those same pages show up collapsed with a '+' icon on the right:

which expand when you click on the '+':

 (yes, the styling is bad...).

The other class of pages is where there is no dropdown whatsoever on wide screens:

On those pages with a narrow screen, I see the child items, but they're permanently expanded:

This is all with my customized Bootstrap 5 Lite theme, but I see the same general behavior with Basis.

Wed, Dec 11, 2024 - 8:19am by NumerousHats

Actually, this may have nothing to do with whether the page is a child or has children. It seems that the "Type 2" behavior (no dropdown triangles and permanently expanded link lists under the hamburger) happens only with menu entries that are actual nodes of some content type, whereas "Type 1" (dropdown triangles and '+' symbols under the hamburger) happens with menu entries that are something system-generated, like a views page with a menu entry or '/search/node'.

Wed, Dec 11, 2024 - 10:11am by NumerousHats

Okay, I think I may be closing in on it. It might be some sort of bad side-effect of the Mosaic Grid module. Need to confirm.

Sat, Jan 11, 2025 - 3:09pm by NumerousHats

In case anybody comes back to this, I think I found the problem. The dropdowns disappear only on pages that do not have any images in the image gallery field. That's because mosaic_grid's JS was crashing due to it not checking for the existence of mosaic grid items, and that somehow prevented the menu JS from running correctly. See the Github issue for details: https://github.com/backdrop-contrib/mosaic_grid/issues/34.