[Support request] Dropdown menu

[Charles]

Does GP support a dropdown menu like the one on the left side of this site, with the hamburger?

https://www.richlandsource.com/

Thanks

[David]

Hi there,

can you provide a screenshot ? As the site is blocked in my country.

[Charles]

https://gettysburgconnection.org/wp-content/uploads/2022/07/14.07.2022_10.00.14_REC.png

[Ying]

Hi Charles,

Yes, you can use GP’s off canvas menu:
https://docs.generatepress.com/article/off-canvas-panel-overview/

[Charles]

Sweet… is it possible to customize the look and feel of the hamburger? I’d like it on the left, perhaps with some text next to it.

Thanks.

[Charles]

Also can you help me customize the menu items. Thanks again.

[Ying]

is it possible to customize the look and feel of the hamburger?

Yes, you can add text to it at customzier > layout > off canvas menu > Desktop Toggle Label.

And how would you like to customize the look and feel?

Also can you help me customize the menu items. Thanks again.

How would you like to customize the menu items?

[Charles]

I’d like to change the background color of some of the items.

Can I move the menu hamburger to the left side?

[Fernando]

Hi Charles,

You’ll may need some custom code to achieve both. To have an idea of your layout, may you kindly provide the link to the site in question?

You may use the private information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Hope to hear from you soon.

[Charles]

Hello, the site is in the private field.

On desktop the off-canvas menu shows as a choice on the primary menu

But on mobile the primary menu is the off-canvas menu.

Can you help with that?

Thanks.

[Fernando]

Thank you!

First off, may I know what versions of GeneratePress and GeneratePress Premium are you using? Are they the latest versions? The current GP version is 3.1.3 and for GP Premium, 2.1.2.

Moreover, may we also know which menu items you’re trying to change the background color of?

Kindly let us know.

[Charles]

GeneratePress Version: 3.1.3
GP Premium Version: Version 2.1.2

I’d like to change the background color of the 10th menu item (SUPPORT US).

[Fernando]

I see. Are you still using floats? You can check this in Appearance > Customize > General. Side note – Here’s a reference to Flexbox: https://docs.generatepress.com/article/switching-from-floats-to-flexbox/. It would be best to take a backup of your site before switch to flexbox if you do decide to switch.

In any case, with your current structure, here’s a CSS you may try adding in Customize > Additional CSS:

div#primary-menu > .menu {
    display: flex;
    flex-wrap: wrap;
}

.slideout-toggle{
    order: -1;
}

With regards to the background color of the specific menu item, here’s another CSS you may add:

ul#menu-off-canvas li:nth-of-type(10) {
    background-color: #000000;
}

You may replace #000000 with your preferred color code.

Hope this clarifies!

[Charles]

The background color code is perfect.

The menu code allows selecting the off-canvas, but the primary menu is expanded by default, which it shouldn’t be.

[Fernando]

To clarify, do you want only the Off Canvas menu appearing on Desktop as well?

If so, you’ll need to set the Mobile menu breakpoint to 2000px.

Kindly let us know. If you’re referring to something else, kindly let us know.

[Author]

Posts