[Resolved] Minor issue with mobile menu margin

Home Forums Support Minor issue with mobile menu margin

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1486122
    mkjj

    I have to make some minor changes on the mobile menu for small displays so that the burger menu is below the logo. This is not a problem at all. I have a minor issue with a 10px left margin in the navigation-branding-min.css of the GP premium plugin:

    .navigation-branding, .site-logo.mobile-header-logo {
        display: flex;
        align-items: center;
        order: 1;
        margin-right: auto;
        margin-left: 10px;
    }

    I would have to use !important in my child theme CSS to override it. I would rather avoid this. Alternatively, I could put it in the customizer CSS. While this is perfectly fine, I’m not a big fan of splitting CSS between the customizer and the child theme.

    Could you recommend a best practice solution?

    This question might sound a little bit nerdy, but GP deserves best practices in each and every detail. 🙂

    #1486248
    David
    Staff
    Customer Support

    Hi there,

    you would need to make your CSS more specific, you can do this by adding a parent element class to your selector eg.

    .main-navigation .navigation-branding, .main-navigation .site-logo.mobile-header-logo {
        margin-left: 0;
    }
    #1486292
    mkjj

    Ah, of course. That’s the way to do it. I usually try to keep my CSS not more specific than needed. But that’s a good solution in this case.

    Thanks for the great support.

    #1486500
    David
    Staff
    Customer Support
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.