Dear backdrop community, I am currently in the process of giving my small book publisher a new website. The data has all been migrated and the queries have been successfully designed using views. Cheers to Backdrop CMS. Thanks a million for the great work. With Wordpress and WooCommerce, I wouldn't have even come close to doing it. But now I'm desperate about one little thing. I have decided to base the design on Bootstrap5. I would have preferred SemanticUI (Fomantic UI), but what the heck. I'm not a designer or developer. If I use the "Primary Navigation" block in the layout, I get nice dropdowns for my menu items. However, as soon as I insert the "Primary Navigation" into the header block - the equivalent of the navbar in Bootstrap, if I'm not mistaken - these dropdowns disappear. The solution is probably completely trivial. It would be nice if you could help me briefly. Many thanks and best regards Michael

Accepted answer

I have created a simple module that provides dropdown style for the header block menu. 

https://github.com/backdrop-contrib/header_dropdown_menu

And here:

https://backdropcms.org/project/header_dropdown_menu

You will most likely need to override the css classes to make the new dropdown menu look decent.

Comments

Hi micdzu. Welcome to the Backdrop Forum!

By design, the menu in the header block doesn't have the ability to be made into a "dropdown" version - it only works as "Top level only". This is annoying! There is an issue in the queue requesting this feature:

https://github.com/backdrop/backdrop-issues/issues/5330

If you post a message there supporting this, perhaps someone will pick this up and mae it happen.

In the meantime, this could be achieved by creating a subtheme and doing some tweaking of the templates, and/or layout templates (not trivial). 

@micdzu What about adding the "Primary navigation" as a block in the Top region and disabling it in the header configuration? It might require some extra theming.

The nice_menus module works as a drop down in the header region. It has it's own css file that you can copy to your theme and adapt. It will take more work to adapt it to toggle as a hamburger menu for small screens.

Dear @argiepiano,

thank you for the great job.

@argiepiano The header_dropdown_menu works great. I used a direct download of the latest code.