GP subtheme Prime hamburger button location

Hi JR,

I don't quite understand your issue here. The default Prime mobile view looks like this:
https://www.screencast.com/t/Yr0gYEJkTjh5
Are you seeing it differently?

Let me know :)

Hello,

In desktop view, it appears after the cart button.

How can it be set before the primary menu in desktop view?

thank you

We will need to see the page in question to be able to assist.

Can you provide that in the private info field?

Thanks!

This is what we are trying to accomplish:
https://i.postimg.cc/nzgVKszR/GP-20210113-hamburger.png

thank you

We will need to see the page in question to be able to assist.

Can you provide that in the private info field?

Thanks!

Hi Leo,
more details sent.

I went to our default Prime install and activated the off canvas menu for both desktop and mobile and this is what I see:
https://www.screencast.com/t/XYt5VtBZSl

I don't really want to provide my IP in a public forum here. Can you start a staging site so I can view the issue quickly?

Or we can revisit the issue once the site is live - should be an easy fix once we have something to look at.

Hi,

using your example of default Prime:
https://i.postimg.cc/Hn9fT2n7/GP-20210113-hamburger-2.png

how can the hamburger icon be move before the primary menu (before the Tshirt category)

thank you

Ahh sorry I misunderstood your question.

The easiest way is actually to add the toggle as a custom link menu item in the menu.

Use # as the URL field.

This would be the navigation label:
<span class="gp-icon pro-menu-bars"> <svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1em" height="1em"> <path d="M0 96c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24zm0 160c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24zm0 160c0-13.255 10.745-24 24-24h464c13.255 0 24 10.745 24 24s-10.745 24-24 24H24c-13.255 0-24-10.745-24-24z"></path> </svg> </span>

Then add slideout-toggle as the CSS class.

https://www.screencast.com/t/dUiUFg4p9T

This adds the hamburger before the Tshirts category, but the "default" hamburger still appears after the shopping basket... how can the default hamburger be removed in the desktop now that its been added to the menu per your code?

Thank you for all your help.

Try this CSS:

.menu-bar-items .slideout-toggle {
    display: none;
}

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

perfect. thank you.

No problem :)