[Support request] Need to remove Primary Menu on Mobile devices and replace with SlickNav plugin

[Alicia]

Hi!

I’m trying to remove the Primary menu on Mobile. For accessibility, I need a tab sequence:

1. Skip Link
2. Accessibility Toggles
3. Logo
4. Search
5. Menu
6. PayPal link

You can see I’ve managed to do this on desktop with Flexbox and the Order property. I’m having a hard time replicating this on Mobile menu, so I’m trying to use the SlickNav plugin. I think I can get things to work, if I can remove the mobile menu.

I’ve been trying to find a solution for over an hour and nothing is working.

I also need the solution to really remove it, not hide with CSS. Screen readers still read that info even though hidden with CSS.

Thanks so much for any guidance!

[Elvin]

Hi,

You refer to this documentation on how to use a different menu on mobile.

https://docs.generatepress.com/article/using-a-different-menu-on-mobile/

[Alicia]

Hi Elvin!

I don’t want to use a different menu on mobile. I want to use the same primary menu on Desktop and Mobile.

I don’t want to use the Mobile header. It’s causing the problem for me. Is there a way to get rid of mobile menu and header and just use same for both desktop and mobile?

[David]

Hi there,

could you provide a mockup image of how you ideally want the header lay out for Desktop and Mobile ?

[Alicia]

Okay, new plan.

But, still need help. Apparently, my hackery to get the proper tab sequence has been expose and doesn’t work at +400 zoom. I used flexbox and absolute positioning..

I need to move the logo to top bar. Is this possible?

Looking to replicate this:

https://www.deque.com/

Perhaps, I can remove header and hook in my own header and top bar?

[Alicia]

I think I may have figured this out!

[David]

Glad to hear that!

[Author]

Posts