[Resolved] Styling Mobile Menu

Home Forums Support Styling Mobile Menu

  • This topic has 4 replies, 2 voices, and was last updated 1 year ago by Leo.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1015299
    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

    #1015311
    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

    #1015363
    Leo
    Staff
    Customer Support

    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 🙂

    #1015379
    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

    #1015388
    Leo
    Staff
    Customer Support

    Glad I could help 🙂

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.