[Support request] Change color of mobile menu

[Jesse]

Hello,

How do I change the background color of my mobile menu in only the area where the red box is? I want to make it green. And I want the nav links to be white.

When I changed the navigation color under the colors settings in the customizer, it made the entire nav green (like even where the logo is located and on the desktop view too).

Best regards,
Jesse

[Fernando]

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! 🙂

[Jesse]

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

[Fernando]

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. 🙂

[Jesse]

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

[David]

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…

[Author]

Posts