Mobile Menu Positioning To Top

[William]

Hello! Love GP! Regarding the mobile menu appearing under the mobile logo (I increased the height of the logo to push down the menu on 320px display), what is the best way to relocate the mobile menu to the top of the page?

Note: I already have content (a hook: before_header) above the header. And, I am not using a sticky menu.

Thank you in advance!

[Leo]

Hi there,

Just want to confirm first, do you want the mobile toggle to be inline with the logo on the right?

Or actually to the top of the page before the before_header hook content?

Let me know 🙂

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

[William]

At the top, positioned above the existing hook I have up there.

[Leo]

Can you turn off the mobile header option first?

Let me know 🙂

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

[William]

Sure. Done 🙂

[Leo]

Little more complicated than I thought.

Are you going to be using the off cavnas menu for mobile?
https://docs.generatepress.com/article/off-canvas-panel-overview/

Might be a good idea as you have lots of menu items.

Let me know 🙂

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

[William]

I’ve never used the canvas menu. Would happily use it if it solved my issue with being able to place this hamburger menu at top of page. Have you come up with any possible solutions?

[David]

Hi there

if you want to enable the Off Canvas panel and see if this works for you. We can then provide the HTML you will need to add the toggle button above the current hook.

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

[William]

Thank you. I’ve enabled the Off Canvas menu for both desktop and mobile and I see the hamburger menu but it doesn’t appear to be working entirely. I’ve never used it before so I’m not sure if there is something else further I need to do. Apologies for that.

If you could steer me in the right direction and include the HTML toggle code, I’ll dive in and see if I can get it working.

Thank you!

[Leo]

I’m seeing a couple console errors on your page which is why the mobile toggle isn’t working.

Have you added any custom functions so far?

If not any chance you can disable all plugins to see if you can identify the culprit?

Let me know 🙂

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

[William]

I think I will disable off canvas menu as it is opening a can of worms 🙂
I don’t really need the hamburger menu above the top blue bar, I was just wondering how it would be done. Thank you anyway!

[Leo]

No problem 🙂

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

[Author]

Posts