[Resolved] Select Dropdown into main menu

[Mohamed]

Hi,

My question related to the mobile screen
How can I display the main menu(will be categories only) as a dropdown menu?
And the secondary menu be as a slide out.
Screen Shot that’s explain
https://prnt.sc/ums7cz

Regards

[David]

Hi there,

what happens on Mobile ?

[Mohamed]

I want do this to secondary menu on Mobile screen
https://prnt.sc/ums7cz

[David]

In that case you would not use the Secondary Navigation.
Instead enable the Off Canvas panel in Customizer > Layout > Off Canavs. Set this to display mobile and desktop.

Create 2 x menus:
1. Categories – set location to the Primary Navigation.
2. Other menu items – set location to Off Canvas Panel

This will give you the two menus on desktop and the single menu on mobile.

Once thats setup – share a link to your site and we can take a look at creating that layout.

[Mohamed]

I did that but it’s give me two menus in both PC and Mobile,
By any way please check it now

[David]

I am only seeing the one menu on mobile.
For you category menu, create a drop down menu – see here:

https://docs.generatepress.com/article/using-the-wordpress-menu-builder/#creating-a%C2%A0drop-down-menu

[Mohamed]

Could you check it now?

[David]

Can you now enable the Navigation as Header in Customizer > Layout > Header
And be sure to add a Logo to your Site Identity.

Let us know once that is done.

[Mohamed]

It’s nice on the PC but still don’t have same appearance on mobile.
2-How can I reorder the menu items to be like the screenshot
https://prnt.sc/ums7cz

[David]

You can remove the label from the menu toggle in Customizer > Layout > Primary Navigation –> Mobile Menu Label – just leave the field empty.

Whilst you’re there you can enable the Navigation search.

Let us know once thats done and ill provide the CSS for arranging the menu items

[Mohamed]

I did it

[David]

Do you want the Categories menu displayed on Mobile as well ?
If so then we actually need to disable the Mobile Header.

[Mohamed]

Yes, I want it as a screenshot
https://prnt.sc/ums7cz
and menu items order I have tried to do it

[David]

In customizer > Layout > Primary Navigation – set the Mobile Break Point to 0
That way we can keep the desktop nav on Mobile and then i can look at the CSS

[Mohamed]

This step is done.
Could you look into the CSS.

[Author]

Posts