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 ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[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

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Mohamed]

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

[Author]

Posts