Archived topic

Styling Mobile Menu

4 replies · Started by akmhou on September 21, 2019

Viewing posts 1–5 of 5

September 21, 2019 at 8:19 am #1015299

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

September 21, 2019 at 8:48 am #1015311

UPDATE:
I've got it -- almost.
Two questions:

How can I change the background color of the submenu or the text color on mobile only?
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

September 21, 2019 at 9:44 am #1015363

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 :)

September 21, 2019 at 10:02 am #1015379

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

September 21, 2019 at 10:13 am #1015388

Glad I could help :)

This archived topic is closed to new replies.

Start building better websites today.