[Support request] Show mobile menu left of logo in sticky menu only on mobile with wp mega menu

[elusive2k]

Hello,

I was trying to figure out how I can show the mobile menu button to the left of the logo.
This should be positioned inside Primary Navigation, but it should open up the menu from Secondary navigation.
The primary navigation should also be still visible.
So I would like to have 2 menus inside the primary navigation on mobile.

I am having primary navigation and secondary navigation set as sticky (used a topic from you).
The secondary navigation is supposed to be hidden / replaced by the search (used with shortcode) on mobile.
On mobile the logo should be centered in primary navigation.
I am using the WP Mega Menu on the secondary navigation menu.
I have set the WP Mega Menu to not show mobile menu, because I want to use GeneratePress mobile menu instead.

My issues:
1. – Mobile Menu icon is not showing up (EDIT: it seems when I disable WP Mega Menu plugin it shows up)
2. – How to add shortcode (search function) to secondary navigation (only on mobile)
3. – How to remove shortcode (search function) from primary navigation (only on mobile)
4. – How to center logo in primary navigation (only on mobile)
5. – How to add different menu (same as primary navigation) into secondary menu (only on mobile)

Explanation:
– On mobile: Primary navigation should show: NAV2 : with mobile menu icon left of logo for: NAV2
– On mobile: Logo should be centered
– On mobile: Secondary navigation should hide: NAV2 (could be css)

This is already fixed and should stay as is:
– On desktop: Primary navigation should show: NAV1 (this is working)
– On desktop: Primary navigation should show: search (shortcode) (this is working)
– On desktop: Logo should show on the left (this is working)
– On desktop: Secondary navigation should show: NAV2 (this is working)
– On mobile: Primary navigation should show: NAV1 (this is working)
– On mobile: Secondary navigation should show search (shortcode) (this is working)

I have set my website and the website I used to get the idea from in the URL below.

Kind regards,

Kumar

[David]

Hi there,

This i assume is the example site:
https://shopdesign2.key4dev.nl/

can you share a link to your site?

[elusive2k]

Hi David,

I could only add 1 url, I have changed the URL of my first post into the example site (I don’t want this example site URL to be public visible)
The website where I am trying to accomplish this is https://shopdesign2.key4dev.nl

[David]

My thoughts are:

1. Re-enable the Mobile break point so the Mobile Header is displayed.
2. Enable the Off Canvas Panel for Mobile and assign the same menu you have for your Secondary Nav.
3. The WishList and Account Icons will need to be added as HTML in the inside_mobile_menu_bar hook using a Hook Element:
https://docs.generatepress.com/article/hooks-element-overview/

Once we have all the elements in view we can look at the CSS for arranging them

[elusive2k]

Hi David,

Thanks for thinking this one with me, I think you are have a good thought about that, the only issue is that cart & wishlist are now interactive, they will show amount etc. if I only put icon there I will not be able to have this interactive, right?

[David]

The Cart will automatically display in the Mobile Header.
Does the Wish List have any other methods to display it ?

[Author]

Posts