[Support request] Drop down menu

[Loïc]

Hello ?

[Loïc]

The real issue of your theme if that you can’t set navigation in the top bar (no position available) unless using a widget but the widget does not support drop down … Why ? Normally we should be able to have these two menus mobile responsive in every position of the page.

[Elvin]

The topic I’ve linked was old so the demo site had changed since then but the concept is still applicable. Top bar isn’t exactly made for navigation.

Any particular reason for not using Secondary navigation?

To my suggestion, you can just add a menu on the Secondary navigation and set the secondary navigation to “Above Header” on Appearance > Customize > Layout > Secondary Navigation.

You then create a Block Element hooked to generate_after_secondary_menu.

Inside this block element, place a Container Block containing the your site’s social icons. On the Container Block, add secondary-nav-social-icons class on its additional CSS class(es) field.

You then add this CSS:

nav#secondary-navigation .main-nav {margin: 0 auto;}
nav#secondary-navigation .secondary-nav-social-icons {position: absolute; }

Here’s the expected result – https://share.getcloudapp.com/WnukPGOW

You can see here that we have 2 menus. 1 secondary (top most) and another one for primary (after secondary).

Both dropdowns work and secondary menu has social icons beside it.

[Loïc]

Hello,

I can try this modification but is it compatible with the Conditional Menus that I used for sidebar linked to secondary menu (I can change to primary) like on my main site monstrous.com ?

[Loïc]

‘You then create a Block Element hooked to generate_after_secondary_menu.’

This position is not available, there is only ‘inside secondary navigation’ and nothing shows up …
Please advise .

[Loïc]

Is it possible to have some timely support on that issue ? I did exactly as what you said and nothing works …

[Tom]

Hi there,

Sorry for the wait and confusion here. I’ll try to clear things up.

Can the Top Bar have dropdown menus? Yes, but it would require custom CSS, and would require custom javascript if you need it to turn into a mobile menu.

It would certainly be better to use the Secondary Navigation. From what I can see you could easily use a Menu widget inside the sidebar where you’re currently using the Secondary Navigation.

If you switch to the Secondary Navigation above the header – is there something specific about it you need tweaked? If you need to add social icons, it would be best to use this hook: generate_secondary_menu_bar_items

That way you don’t need any CSS – the Element you hook into it should display in the correct area by default.

Let me know, and sorry again for any confusion.

[Loïc]

Hello Tom,

On my main site, I am using as primary menu (grey), a list of categories (monsters) that do need dropdown. The secondary menu is used to display both the main menu that needs dropdown (music, community, ….) and the specific conditional menus (plugins) to navigate inside each category. For that reason the position is set to the right sidebar and I am using a widget to display it in the top bar. I was thinking the widget would have dropdown too …

Since i need those dropdown for the main menus, I was suggested many tricks by your support and I eventually moved the conditional menus to the primary menu to keep the secondary menu ‘free’. This is on my staging site (see address above) only Godzilla working as conditional menu on the sidebar …

On mobile, I can have a specific main menu that would replace both primary and secondary menu. I think this is possible ?

It is not clear to me how I ‘can create a Block Element hooked to generate_after_secondary_menu’ since I dont find this option.

I would appreciate if you send me detailed instruction.

I hope you will understand my needs.

Loïc

[Tom]

To define a custom mobile menu, I would enable the Mobile Header option, then create a new menu location/menu for mobile like this:

add_action( 'init', function() {
  register_nav_menu( 'mobile-menu', __( 'Mobile Menu' ) );
} );

add_filter( 'generate_mobile_header_theme_location', function() {
    return 'mobile-menu';
} );

To create a Block Element, you would do this: https://docs.generatepress.com/article/block-element-overview/

In the Hook option, choose “Custom Hook” and use the hook name I mentioned. (generate_secondary_menu_bar_items)

Hope this helps!

[Author]

Posts