Styling Mobile Menu

[akmhou]

Hello,

I’me having trouble styling my main menu on mobile. I’m using GPP V 1.8.3 and have activated the Color add on.
My mobile looks transparent because I’ve removed the color from Desktop > Parent Item.

How can I make my mobile menu colors look the same as desktop?

I’ve tried adding the custom CSS (Simple CSS) as provided by Jamal https://generatepress.com/forums/topic/how-to-style-navigation-menu/#post-347001, but that didn’t help.

Could you please take a look and let me know what CSS I should add.

Thanks,
Achinta

[akmhou]

UPDATE:
I’ve got it — almost.
Two questions:

1. How can I change the background color of the submenu or the text color on mobile only?
2. Why is the submenu dropdown getting cut off at the bottom on mobile and how can I fix that?

Please take a look and let me know.

Thanks

[Leo]

Hi there,

1. This CSS should work:

@media (max-width: 768px) {
    .main-navigation .main-nav ul ul li a {
        background-color: #fff;
        color: #000;
    }
}

2. Since you have lots of menu items, try the off canvas menu for mobile only:
https://docs.generatepress.com/article/off-canvas-panel-overview/

Let me know if this helps 🙂

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

[akmhou]

Leo,

Thanks a lot for your quick reply with solutions. They worked like a charm!
The Off Canvas menu for mobile only is a brilliant idea. I prefer it to the default mobile menu.

I’ve marked this as resolved.

Regards,
Achinta

[Leo]

Glad I could help 🙂

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

[Author]

Posts