Change color of mobile menu

Hi Jesse,

To achieve such, you may try adding this CSS in Appearance > Customize > Additional CSS:

div#mobile-menu {
    background-color: #ff0000;
}

div#mobile-menu a {
    color: #fff;
}

Kindly replace #ff0000 and #fff with your preferred color values: https://htmlcolorcodes.com/color-picker/

Hope this helps! :)

Thanks, Fernando!

How would I add my social follow icons to the bottom of that mobile menu where the red circle is?

Currently, the social follow icons that I want to add to the mobile menu can be seen in my footer, in case you need to see them. I just want those to appear in the mobile menu too.

Best regards,
Jesse

Hi Jesse,

You can achieve this easily through using an Off canvas menu instead. This can be found in Appearance > Customize > Layout > Off Canvas Panel.

See: https://docs.generatepress.com/article/off-canvas-panel-overview/

After doing so, you can add Widgets through Appearance > Widgets as such: https://share.getcloudapp.com/p9u6NKKZ

Alternatively, with your current menu, you can also try adding icons as such: https://docs.generatepress.com/article/adding-icons-to-menu-items/#floating-the-icon-to-the-right

Hope this clarifies. :)

Hi Fernando,

The issue is that I want to add those social follow icons to the mobile menu only. I don't need/want them to show up in the primary menu for non-mobile view.

Best regards,
Jesse

Hi there,

what Fernando is suggesting is to use the Off Canvas Panel for your mobile menu: https://docs.generatepress.com/article/off-canvas-panel-overview/

As the default mobile menu does not have a hook or a widget for you to add the icons. Whereas the off canvas menu does support them.

Is the Off Canvas panel an option ?

If it isn't then we can look at other methods that are gonna feel rather hackish...